asked on

CSS backgrounds and xhtml

Trying to get the page content area's background to extend down the page in white with a left menu column in a different colour. The code below seems to work in IE and Mozilla (although slightly differently). But the layout is lost when I add the document type of:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I've given the "page-body" div a red border to show the difference in behavour; the page-body loses it's height so the white background (using the faux background image) is lost below the content of the "pageContent" div.

Is there a solution?

Also the original centers in IE but this test version doesn't.

<html>
<head>

<style type="text/css">

BODY {
background: #2F392F;
background-image : url(images/bg1.gif);
background-repeat: repeat-x;
color: #333333;
margin: 0px;
font-family: Verdana, Arial, sans-serif;
}

#outer {
width: 100%;
height: 100%;
}

#page-wrapper {
width: 755px;
margin: 10px auto 20px auto;
}

#pageHeader {
width: 100%;
margin: 0px;
padding: 0px;
}

div.menu-row {
background: #99CC01;
width: 755px;
margin: 0 auto 0 auto;
padding: 0px;
}

#outer2 {
width: 100%;
}

div.page-body {
width: 755px;
top:0;
margin: 0 auto 0 auto;
background-color: #ffffff;
height: 80%;
min-height: 80%;
background-image : url(images/bg_white.gif);
background-repeat: repeat-y;
border-color: #ff0000;
border-style: solid;
}

#pageColumnLeft {
float: left;
width: 170px;
background: #F8FFE3;
}

#pageContent {
float: left;
background-color: #ffffff;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
font-size: 11px;
line-height: 1.5;
text-align : left;
width: 544px;
}

div.footer {
text-align: center;
font-size: 10px;
color: #ffffff;
width: 100%;
float: left;
padding: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="outer">
<div id="page-wrapper">
<div id="pageHeader">
       <div class="menu-row"> Menu</div>
       </div>
       <div id="outer2">
       <div class="page-body">
<div id="pageColumnLeft">
pageColumnLeft<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="pageContent">
pageContent<br />height of white content area needs to extend with height of left column as seen in IE, but it's shorter in Mozilla until height: 80%; and min-height: 80%; is added to page-body style.
</div>
       </div>
       </div>
<div class="footer">
footer
</div>
</div>
</div>
</body>

TName

Just set the height of html, body, outer, page-wrapper and outer2 to 100%:

html, body {height:100%;}
 
body {
  background: #2F392F;
  background-image : url(http://www.google.de/intl/de_de/images/logo.gif);
  background-repeat: repeat-x;
  color: #333333;
  margin: 0px;
  font-family: Verdana, Arial, sans-serif;
}
 
#outer {
  width: 100%;
  height: 100%;  
}
 
#page-wrapper {
  width: 755px;
  margin: 10px auto 20px auto;
  height:100%;
}
 
#pageHeader {
  width: 100%;
  margin: 0px;
  padding: 0px;
}
 
div.menu-row {
  background: #99CC01;
  width: 755px;
  margin: 0 auto 0 auto;
  padding: 0px;
}
 
#outer2 {
  width: 100%;
  height:100%;
}

Open in new window

TName

In standards cpmpliance mode (valid coctype), 100% (or 80%) height menas 100% (or 80%) of the parent's height (not the viewport's height) - so ALL ancestors of an element, starting with "html", have to have the height set (usually 100%)...

ncw

ASKER

That's very helpful, thanks for the explanation. I had tried height: 100%; in all but the outer2 style, that made the difference for when the left column is longer than the page content. However it doesn't look so good when you have a largish screen as the blank white area can be extensive when it expands to the full 100% height (which I assume is calculated on screen height not browser height).

The main problem remaining is that if the page content is very long and goes beyond the height of the 100% div height then the page content div extends below the left column div height which leaves a green area to the left. Seems all a bit flaky compared to trusty tables!

ncw

ASKER

This site seems to manage varying page lengths with a menu column: http://www.skyinteractive.com/sky/what+is+dtv/default.htm

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ncw

ASKER

My later question at https://www.experts-exchange.com/questions/23223714/Replacing-tables-with-divs.html solved my problem.