Solved

CSS backgrounds and xhtml

Posted on 2007-12-07
6
1,241 Views
Last Modified: 2013-11-19
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
Comment
Question by:ncw
  • 3
  • 3
6 Comments
 
LVL 28

Expert Comment

by:TName
ID: 20426831
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
 
LVL 28

Expert Comment

by:TName
ID: 20426846
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
 
LVL 1

Author Comment

by:ncw
ID: 20427009
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

by:ncw
ID: 20427464
This site seems to manage varying page lengths with a menu column: http://www.skyinteractive.com/sky/what+is+dtv/default.htm
0
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 20433686
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
 
LVL 1

Author Comment

by:ncw
ID: 21123789
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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