• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1262
  • Last Modified:

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>  
0
ncw
Asked:
ncw
  • 3
  • 3
1 Solution
 
TNameCommented:
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

0
 
TNameCommented:
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%)...
0
 
ncwAuthor Commented:
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!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ncwAuthor Commented:
This site seems to manage varying page lengths with a menu column: http://www.skyinteractive.com/sky/what+is+dtv/default.htm
0
 
TNameCommented:
Not really, what they are using is a variety of the widely used "faux column" solution - the nav column to the right doesn't really expand down to the bottom of the container, but you are given that impression because the large container (with e.g. a white background color) has a background image that looks like part of the nav column ( http://www.skyinteractive.com/images/bg_content_foot.gif )

Just google for "faux columns" and you'll find many good tutorials, like e.g.
   http://www.alistapart.com/articles/fauxcolumns/
0
 
ncwAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now