We help IT Professionals succeed at work.

How can I keep this page from collapsing?

Bruce Gust
Bruce Gust asked
on
131 Views
Last Modified: 2014-12-29
Head out to http://brucegust.com/campaign/OOP/csv_upload/index.php

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;
}

Open in new window


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:

screenshot
,,,and not this:

screenshot
How do I adjust my CSS so the width of my header doesn't shrink beyond a certain point?
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Bruce GustPHP Developer

Author

Commented:
Got it!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.