Hi Cienwen,

In IE there is a big blank inside mainContent. It appears empty

Are you meaning in ie6? That's caused by the ie box-model which adds widths and margins together. As the specified div#outerwrapper width doesn't allow enough space, the header is being "dropped" until there is enough room. (As the heights are set to be 100% of the viewport, the header is "dropped" 100% of the viewport height which is why you see a "blank" until scrolling "below the fold".)

On the provided code my guess is you wish the header to display visually "centered". If that's correct, tell the browser what you want - equal distribution of space on left and right (rather than margins of a precise width). Do that by removing the explicit margin setting

margin: 0 38px 0 38px;

and replace with

margin:0 auto;

It is working pretty good in FireFox except the whiteWrapper is extending way down below the end of it's container (mainContent).

div#whitewrapper is obeying the directive to calculate its height as 100% of its parent (maincontent). div#maincontent has been ordered to calculate height as 100% of its parent - div#outerwrapper, and div#outerwrapper calculates height from body, and so on. The outcome of this inheritance is that div#whitewrapper is drawn with a height dimension that is the same as the initial height measurement for the viewport.

Stop child elements "overflowing" by setting

overflow:hidden

on the parent - in this case div#maincontent. However, that works on the provided code because there is no content (text, images etc) that requires scrolling.

If the document needs to scroll, a different technique will be required - provide a little more information about the other elements on the page (like content, footers, etc).

- always useful to validate your code - the spans around the <li>'s are not valid - perhaps move the class to the <li> to avoid using them

Yes, I need the content to scroll. I have reworked somethings and your IE6 suggestion worked great. But, of course, I have new issues.

The same thing is still happening in FireFox. The #whiteWrapper extends way below the #outerWrapper. Otherwise everything looks great.

Things are really crazy in IE(6). The #whiteWrapper is about 15px too narrow on each side. The #bodyContent Div has completely disappeared. The #mainContent and #whiteWrapper extend way below the #mainContent. On top of that, the changes from the span .subNavIndent on the LIs are not showing at all even though they are in FireFox.

man!

CSS:

@charset "utf-8";
/* CSS Document */
html {
height:100%;
}
body {
background-color: #92c94e;
text-align: center;
padding: 0;
margin: 0 auto;
height:100%;
}
#outerWrapper {
margin:0 auto;
width: 950px;
height: 100%;
}
#leftShade {
margin:0;
width: 23px;
height: 100%;
background:url(images/border-left.gif) repeat-y;
float: left;
}
#rightShade {
margin: 0;
width: 23px;
height: 100%;
background:url(images/border-right.gif) repeat-y;
float:right;
}
#mainContent {
margin:0;
height:100%;
background-color: #f8dd8e;
}
* html #leftShade {
margin-right: -3px;
}
* html #rightShade {
margin-left: -3px;
}
#header {
width: 874px;
height: 116px;
background-image: url(images/header_02.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}
#navDiv {
height: 30px;
}
#navDiv ul {
margin: 10px 0 0 0;
}
#navDiv ul li {
display: inline;
font: bold 14px Verdana, sana-serif;
font-weight: 100;
margin: 0;
}
#navDiv ul li a {
color: #08197e;
list-style-type: none;
text-decoration: none;
text-transform: uppercase;
padding: 0 10px 0px 10px;
}
#banner {
margin: 0 0 10px 0;
}
#whiteWrapper {
width: 874px;
margin:0 auto;
height:100%;
background: #FFFFFF;
}
#subNav {
width: 220px;
margin: 15px 0 0 15px;
float: left;
background-image: url(images/sub-nav-bg.jpg);
background-repeat: no-repeat;
text-align: left;
}
ul.subNavUl li {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #122561;
text-transform: uppercase;
list-style-type: none;
padding: 0 0 12px 0;
text-indent: -1.5em;
}
.subNavIndent {
font: 11px;
text-transform: lowercase;
padding: 0 0 0 12px;
}
#bodyContent {
width:575px;
padding: 0 15px 0 0;
text-align:left;
float:right;
}
#footer {
height:40px;
clear:both;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerWrapper">
<div id="leftShade"></div>
<div id="rightShade"></div>
<div id="mainContent">
<div id="header"></div>
<div id="navDiv">
  <ul class="navList">
   <li><a href="index.php">Home</a></li>
   <li><a href="project.htm">link</a></li>
   <li><a href="school.htm">link</a></li>
   <li><a href="press.htm"> Press</a></li>
   <li><a href="photos.htm">Photos</a></li>
   <li><a href="help.htm">You Can Help</a></li>
   <li><a href="contacts.htm">Contacts</a></li>
  </ul>
 </div>
 
 <div id="banner"><img src="images/banner.jpg" /></div>
 
 <div id="whiteWrapper">
 
 <div id="subNav">
 <ul class="subNavUl">
   <li><a href="index.php">Home</a></li>
   <li><span class="subNavIndent">Mission Statement</span></li>
   <li><span class="subNavIndent">School Founder</span></li>
   <li><span class="subNavIndent">Share Our Vision</span></li>
   <li><a href="project.htm">link</a></li>
   <li><a href="school.htm">link</a></li>
   <li><a href="press.htm"> Press</a></li>
   <li><a href="photos.htm">Photos</a></li>
   <li><a href="help.htm">You Can Help</a></li>
   <li><a href="contacts.htm">Contacts</a></li>
  </ul>
  <p>&nbsp;</p>
 </div>
 <div id="bodyContent">
 <h1>Contacts</h1>
   <h2>USA Contacts</h2>
   <p> stuff<br />
   stuff<br />
   stuff</p>
   <p>stuff<br />
   Chairman <br />
   stuff<br />
 <a href="stuff">stuff</a></p>
   <p>stuff<br />
   President<br />
   stuff<br />
 <a href="stuff">stuff</a></p>
 </div>
 
 <div id="footer">&copy;2008</div>
 
 </div>
</div>
</div>
</body>
</html>

I intend that there will be different amounts of content on each page but I would like the colors of the #outWrapper to extend 100% of the page height.

Alas. Thanks for the help.

On the provided code, I'm not seeing the differences between ff2&3, ie6&7, Opera9 and winSafari that you are reporting, so my suggestions reflect that.

the changes from the span .subNavIndent on the LIs are not showing at all

Several things will help here:

• Good that you moved the spans inside the <li's>, but important to keep validating when having troubles -

  font

  is short-hand, so to adjust size use

  font-size

  on .subNavIndent.
  
• Be aware of specificity. ul.subNavUl li targets an li that is a child of a ul with the class of .subNavUl, while .subNavIndent applies to any old thing that has the same class name. As the first is more specific, it will over-ride the more general class.
  
• I suggest simple mark-up, so remove the spans and just apply the class and styles direct to the li -

   <li class="subNavIndent">

  .
  
• To deal with specificity, select

  ul.subNavUl li

  with just

  .subNavUl li

  , and

  .subNavIndent

  by

  li.subNavIndent

  
  
• Another way would be to change

  ul.subNavUl li

  to

  #subNav li

  and

  .subNavIndent

  to

  #subNav .subNavIndent

  which itmore obvious they relate when reading the code.
  
• If you must keep the span, select it via

  li span.subNavIndent

  to give it the same specificity as

  ul.subNavUl li

  
  

On a side-note, that

text-indent:-1.5em

makes me wonder if you are overcoming the natural paddings/margins of <ul> and <li> by "pulling" the <li>'s "left-wards". Consider styling the highest level element (ul) and removing padding/margins so the majority <li>'s are positioned where you want them, then just class the specific <li>'s for the additional indent etc. This gives you more control, should reduce the amount of code, allows the browsers to get on with laying out the page rather than shoving <li>'s right and left ;) , and should make it easier to avoid specificity issues.

The #whiteWrapper is about 15px too narrow on each side. The #bodyContent Div has completely disappeared.

Unfortunately I just cannot see this at all - #bodycontent is visible and all widths are consistent cross-browser, and per the css. ;(

#whiteWrapper extends way below the #outerWrapper.

Per my earlier post, this is not really "extending". #whitewrapper is obeying the order to give itself the same height as the viewport. #whitewrapper begins lower down the page than #outerwrapper, so that height makes #whitewrapper "end" further down the page than #outerwrapper.

Alas.

Although frustrating, your layout can be achieved, but recall you are trying to order the user agent (browser) to draw the elements to the stated height - which is the height of the viewport, although what is really desired is to obey the stated height if the content is shorter than the viewport height, but ignore the stated height and make the elements taller if the content won't fit within the viewport. So the browser is expected to measure the content, and the viewport, and compare them, and obey the stated heights - sometimes - using css, which is a tool for styling elements in the document, not measuring browser chrome.

Thread #34 (2, 3, Multi Column CSS Templates and Layouts) in the forum library plus #33 (positioning a footer) will help.

Have fun - and keep at it ;)