?
Solved

CSS backgrounds and xhtml

Posted on 2007-12-07
6
Medium Priority
?
1,254 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
[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
  • 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
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.

 
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 1500 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

A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

766 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