tags:

views:

36

answers:

4
Q: 

DIV background does not span 100% for entire body

I'm posting this because I am going crazy.

I have a page where the content is centered in the page and must span from top to bottom no matter the content, with two columns.

So I have a content div with a left child div and a right child div. The code is the following:

<html>
<head>
  <style type="text/css">
    html, body {
      margin-top: 0px;
      margin-bottom: 0px;
      height: 100%;
    }

    .main {
      min-height: 100%;
      margin: auto;
      width: 400px;
      background-color: red;
    }

    .left {
      width: 100px;
      padding: 0px;
      height: 100%;
      float: left;
      background-color: blue;
    }

    .right {
      width: 300px;
      height: 100%;
      padding: 0px;
      float: right;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  </body>
</html>

This works fine and the div spans to the bottom. I see two columns green and blue. The problem is that this does not work if the content in the divs (left or right) is larger then the browser window. Add a lot of content to the left or right div and you should see what I'm talking about, something like:

<div class="main">
  <div class="left">
    Left<br>
    Left<br>
    Left<br>
    Left<br>
    .... <!-- lots of these -->
  </div>
  <div class="right">
    Right<br>
    Right<br>
    Right<br>
    .... <!-- lots of these -->
  </div>
</div>

My question is, why is this happening (I have set html, body { height: 100%; }) and how can I fix it?

I am going crazy. Please help me!

Thank you!

+2  A: 

Are you clearing floats?

.main:after { content:""; clear:both;display:block; }

EDIT: In your SO code you use min-height whereas in the example you use regular height for .main. See, typos and human errors do happen a lot, which is why I wanted the real code.

I edited it for you: http://jsfiddle.net/Gd34j/1/

meder  2010-08-28 19:49:57
I don't understand. What does "clearing floats" mean?
goingCrazyForCSS  2010-08-28 19:51:53
http://work.arounds.org/clearing-floats/ , http://www.quirksmode.org/css/clearing.html , http://www.w3.org/TR/CSS2/visuren.html#flow-control
meder  2010-08-28 19:53:56
I have inserted what you specified and seems to be working only for IE but not for Mozilla. I have IE 8 and Mozilla 3.6.8
goingCrazyForCSS  2010-08-28 20:40:14
Can you please post full code?
meder  2010-08-28 20:48:06
The full code is in my question (with lots of Left<br> and Right<br> to force scrolls on the windows). To that, I added in the styles just the code you posted in your answer (nothing else) and it works. But just in IE.
goingCrazyForCSS  2010-08-28 20:51:17
Sometimes people make typos and mistakes, which is why it's best if you post what I had suggested anyway. A full page demo @ jsfiddle would be best.
meder  2010-08-28 21:00:11
Done. Please see here: http://jsfiddle.net/Gd34j/
goingCrazyForCSS  2010-08-28 21:11:25
Thank you meder. That will teach me to work on code past midnight :). I now see that main has expanded to contain the right (green) div. The left (blue) div is continued with a red background so the main div expanded. The thing is that it still does not work on Mozilla 3.6.8. I see left and right divs colored up until the browser window (green and blue colors stop at the same level), but if I scroll I see white all over the place. Is there a bug in Mozilla, must I do something different?
goingCrazyForCSS  2010-08-29 11:43:51
I have just installed Chrome and it behaves the same as Mozilla. I'm starting to think this is a IE problem.
goingCrazyForCSS  2010-08-29 11:55:40
A: 

You could also try loading the colors as a background image on the page. Create a 1200px by 10px image with your background, then in your main container set background:url("bluegreen.jpg"), then set background-repeat to repeat-y.

Kevin Burke  2010-08-28 20:00:15
A: 

Thanks to meder who pointed me on the right track, I finally managed to make it run consistently in IE, Mozilla and Chrome. Here is the complete code, hope it helps someone else too:

<html>
<head>
<style type="text/css">
html,body {
    margin: 0px 0px 0px 0px;
    height: 100%;
    text-align: center;
}

.main:after {
    content: "";
    display: block;
    clear: both;
}

.main {
    background-color: red;
    width: 400px;
    min-height: 100%;
    margin: auto;
   text-align: left;
}

.left {
    width: 100px;
    padding: 0px;
    float: left;
    min-height: 100%;
    background-color: blue;
}

.right {
    width: 300px;
    min-height: 100%;
    padding: 0px;
    float: right;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
<div class="right">Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
</div>
</div>
</body>
</html>
goingCrazyForCSS  2010-08-29 15:54:55
A: 

If you have floating elements in a non floating element, they will not expand the parent element. Just a floating to the main element:

.main {
  min-height: 100%;
  margin: auto;
  width: 400px;
  background-color: red;
  float: left; /* adding floating so the parent elements expands */
}
Kau-Boy  2010-08-29 16:04:13

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?