How can I keep this page from collapsing?
Head out to http://brucegust.com/campaign/OOP/csv_upload/index.php
Here's my CSS:
I'm happy with what I've got save one dynamic: I want the page to stop "collapsing" to the point where the right graphic goes behind the left graphic. In other words, if the user attempts to minimize the screen to the point where the width decreases to the point where the right graphic starts to go behind the left graphic, I want the width to be "fixed" so should it get that small, the graphics stay immediately opposite one another.
I want this:
,,,and not this:
How do I adjust my CSS so the width of my header doesn't shrink beyond a certain point?
Here's my CSS:
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .80em 'Droid Sans', arial, sans-serif;
background: #FFF;
color: #000;
}
p {
padding: 0 0 16px 0;
line-height: 1.7em;
}
img {
border: 0;
margin-left: 10px;
}
h1, h2, h3, h4, h5, h6 {
color: #000;
letter-spacing: 0em;
padding: 0 0 5px 0;
}
h1, h2, h3 {
font: normal 140% 'News Cycle', arial;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
padding: 0 0 5px 0;
font: normal 120% 'Droid Sans', arial, sans-serif;
}
h5, h6 {
font: italic 100% 'Droid Sans', arial;
padding: 0 0 15px 0;
}
h6 {
font: normal 100% 'Droid Sans', arial;
}
a, a:hover {
outline: none;
text-decoration: none;
color: #cc0000;
}
a:hover {
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#header {
background-image: url(http://brucegust.com/campaign/OOP/csv_upload/images/background_image.jpg);
width:100%;
height: 200px;
}
#logo {
position:absolute;
margin:0;
z-index:1;
width: 455px;
height: 200px;
background-image:url(http://brucegust.com/campaign/OOP/csv_upload/images/left_logo.jpg);
}
#right_tabs {
position:relative;
float:right;
z-index:0;
width:745px;
height:200px;
background-image:url(http://brucegust.com/campaign/OOP/csv_upload/images/right_tabs.jpg);
}
#logo #logo_text {
width: 1200px;
/*background-image: url(../images/vz.png);
background-repeat: no-repeat;*/
height: 50px;
display: block;
}
#logo h1, #logo h2 {
font: normal 180% 'News Cycle', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
color: #000000;
text-align: left;
width: 75%;
}
#logo_text2 h1, #logo_text2 h1 a, #logo_text2 h1 a:hover {
color: #000000;
text-align: left;
}
#logo_text h1 a .logo_colour {
color: #000000;
text-shadow: 1px 1px #cc0000;
}
#logo_text a:hover .logo_colour {
color: #000000;
background-image: url(../images/vz.png);
text-indent: 200px;
}
#logo_text h2 {
font-size: 130%;
padding: 0 0 0 0;
color: #FFF;
}
nav {
height: 44px;
margin: -44px auto 0 auto;
color: #fef4e9;
background: #000000; /*menu background color*/
}
#menu_container {
width: 1000px;
padding-left: 100px;
}
#site_content {
width: 1000px;
overflow: hidden;
margin: 0px auto 0 auto;
padding: 15px 0 25px 0;
}
#site_content2 {
width: 1000px;
overflow: hidden;
margin: 0px auto 0 auto;
padding: 15px 0 25px 0;
height:508px;
}
#sidebar_container {
float: left;
width: 234px;
margin: 15px 0 0 5px;
}
#sidebar_container2 {
float: left;
width: 5px;
margin: 0 0 0 10px;
}
.sidebar {
width: 200px;
margin: 0 0 0px 0;
padding: 0 15px 5px 13px;}
.sidebar h3, .content h1 {
padding: 0 15px 20px 0;
font: 200% 'News Cycle', arial, sans-serif;
margin: 0 1px;
}
.sidebar h3 {
padding: 4px 15px 9px 0;
}
.sidebar ul {
margin: 0 0 15px 0;
}
.sidebar li a, .sidebar li a:hover {
color: #000;
text-decoration: none;
}
.sidebar li a:hover {
text-decoration: underline;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
.content {
text-align: left;
width: 75%;
margin: 0 0 15px 0;
float: right;
font-size: 120%;
padding: 14px 0 0 0;
}
.content2 {
text-align: left;
width: 100%;
margin: 0 0 15px 0;
float: left;
font-size: 120%;
padding: 14px 0 0 0;
}
.content3 {
}
.content ul {
margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li {
list-style-type: none;
background: url(../images/bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 28px;
line-height: 1.5em;
}
footer {
font: 100% 'Droid Sans', arial, sans-serif;
height: 125px;
padding: 28px 0 5px 0;
text-align: center;
color: #000000;
margin-bottom: -20px; /*border-top: 6px solid #cc00000;*/
}
footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
color: #000000;
}
footer a {
color: #000000;
text-decoration: none;
}
footer a:hover {
color: #FF0000;
text-decoration: underline;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 5px;
width: 299px;
font: 100% 'Droid Sans', arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings .submit {
font: 100% 'Droid Sans', arial;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #1A1225;
color: #FFF;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings textarea, .form_settings select {
font: 100% 'Droid Sans', arial;
width: 299px;
}
.form_settings select {
width: 310px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table1 tr th, table tr td {
color: #FFF;
padding: 7px 4px;
text-align: left;
text-shadow: none;
}
table tr td {
color: #47433F;
border-top: 1px solid #FFF;
}
table1 tr td {
color: #FFF;
border-top: 1px solid #FFF;
}
/* scroll to top */
#scroll {
position: relative;
width: 1000px;
margin: 0 auto;
bottom: 15px;
right: 0px;
padding: 0;
background-color: #cc0000;
}
#scroll a {
float: right;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#scroll a img {
float: right;
padding: 0 0 0 0;
margin: 0;
}
/**
Stylesheet for SooperFish by www.SooperThemes.com
Author: Jurriaan Roelofs
**/
/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 150px; /* size of dropdown menu */
}
html body ul.sf-menu ul ul {
margin: 0 0 0 150px; /* offset of dropdown menu */
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;
}
ul.sf-menu {
display: block;
position: relative;
}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;
}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu ul {
position: absolute;
left: 0;
width: 10px;
top: auto;
}
ul.sf-menu ul a {
/*zoom: 1; IE6/7 fix */
}
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 15px;
}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 15px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
background: url(../images/arrows-white.png) no-repeat 0 0;
background: url(../images/arrows-black.png) no-repeat 0 0;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 10;
top: 20px;
background-position: 0 100%;
}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
background: #F8F8F8;
margin-top: 5px;
padding-bottom: 10px;
font:bold;
}
ul#nav li a {
padding:5px 20px 6px 20px;
font: 150% 'News Cycle', arial, sans-serif;
text-decoration: none;
color:#FFF;
margin-right: 2px;
}
/*ul#nav1 li a {
font: 100% 'News Cycle', arial, sans-serif;
color: #000000;
border-left: thin solid #000;
border-right: thin solid #000;
text-align: center;
}*/
ul#nav2 li a {
font: 100% 'News Cycle', arial, sans-serif;
color: #000000;
/*border-left: thin solid #000;
border-right: thin solid #000;*/
text-align: left;
}
ul#nav2 li a2 {
font: 100% 'News Cycle', arial, sans-serif;
color:#CCC;
/*border-left: thin solid #000;
border-right: thin solid #000;*/
}
ul#nav2 u {
font: 100% 'News Cycle', arial, sans-serif;
color: #000000;
text-align: left;
font-weight: bold;
}
ul#nav2 li {
font: 100% 'News Cycle', arial, sans-serif;
color: #000000;
font-weight: bold;
text-align: center;
}
ul#nav li a:hover,ul#nav li a:focus {
color: #FFF;
font:bold;
/*text-decoration: underline;*/
}
ul#nav1 li a:hover,ul#nav1 li a:focus {
color: #000;
text-decoration: underline;
font: bolder;
}
ul#nav2 li a:hover,ul#nav2 li a:focus {
color: #000;
text-decoration: underline;
font: bolder;
}
.vpt_td {
/*display: inline-block;
border-right:none;
border-left:none;*/
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
border-color:#7a7a7a;
}
.tbl0{
width: 1%;
/*height: 60px;*/
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 14px;
border-color:#7a7a7a;
}
.tbl1{
width: 1%;
height: 1%;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-size: 14px;
border-color:#7a7a7a;
table-layout:auto;
}
.tbl2 {
border-right:none;
border-bottom:none;
}
.tbl3 {
/*display: inline-block;*/
border-right:none;
border-left:none;
border-bottom:none;
}
.usage1{
/*display: inline-block;*/
border-bottom:none;
}
.usage2{
/*display: inline-block;*/
border-right:none;
border-left:none;
border-bottom:none;
}
.tbl4 {/*display: inline-block;*/
border-right:none;
border-left:none;
border-top:none;
}
.tbl5 {
/*display: inline-block;*/
border-right:none;
border-left:none;
}
.main_table {
height: 400px;
overflow-x: auto;
overflow-y: auto;
width: auto;
}
.event_table {
height: 400px;
overflow-x: auto;
overflow-y: auto;
width: auto;
}
.venue_table {
height: 400px;
overflow-x: auto;
overflow-y: auto;
width: auto;
}
a:link {
color: #000000;
}
a:hover {
color: #000000;
}
table.csv_sample {
box-shadow: 7px 7px 15px #e9e9e9;
border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
margin:auto;
width:auto;
border: 1px solid #d7d4d4;
}
td.csv_sample {
padding:5px;
border: 1px solid grey;
text-align:center;
background-color:#cccccc;
}
td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
}
td.title {
text-align:right;
}
.conclusion {
width:750px;
margin:auto;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}
.callout {
width:250px;
margin-right:10px;
position:relative;
float:left;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}
#code_container {
border:1px solid #000000;
width:807px;
height:250px;
overflow:auto;
background-color: #013c76;
font-family:Arial;
color:#ffffff;
font-size:10pt;
margin:auto;
}
ol {
background-color:#ffc;
color:#ffffff;
padding-left:8px;
padding-right:10px;
margin-top:0px;
margin-bottom:-12px;
}
ol li {
line-height:8px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
}
ol li span {
color:#000000;
}I'm happy with what I've got save one dynamic: I want the page to stop "collapsing" to the point where the right graphic goes behind the left graphic. In other words, if the user attempts to minimize the screen to the point where the width decreases to the point where the right graphic starts to go behind the left graphic, I want the width to be "fixed" so should it get that small, the graphics stay immediately opposite one another.
I want this:
,,,and not this:
How do I adjust my CSS so the width of my header doesn't shrink beyond a certain point?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER