Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How can I keep this page from collapsing?

Posted on 2014-12-29
2
Medium Priority
?
96 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?
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40522497
Use min-width:xxx
0
 

Author Comment

by:brucegust
ID: 40522526
Got it!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question