Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

The old "3 Column Layout" topic with a twist

I can't find a solution to this problem anywhere

4:18 am on Aug 26, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 7, 2004
votes: 0


How to replicate the problem I'm having:

1. Fill the <div id="content"></div> with text until it extends past the bottom of your screen and scroll bars are shown.
2. Scroll down.
3. Notice how the colors stops at the bottom of the screen. I want all the colors to continue all the way down to the bottom of the text.

There is a slight difference between IE and Fire Fox.
Can this be done?

DocType: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<div id="leftbar"></div>
<div id="rightbar"></div>
<div id="content"></div>


html {width:100%; height:100%; padding:0; margin:0;}
body {width:100%; height:100%; padding:0; margin:0;}
#leftbar {width:80px; height:100%; float:left; margin:0; padding:0; background:green;}
#rightbar {width:80px; height:100%; float:right; margin:0; padding:0; background:blue;}
#content {width:auto; height:100%; min-width:624px; margin:0 80px; background-color:red; color:black;}

I hope this all makes sense
3:29 pm on Aug 26, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
votes: 0

Because #content has a height:100% setting, the actual content of the div is not defining it's height. Therefor, when the text scrolls off the screen, the height of the div is still being calculated at 100% of the viewport (actually, 100% of the body, which is 100% of the html, which is 100% of the viewport). In other words, the text that runs off the screen and has a white background is actually spilling out of the div that contains it.

One solution: Remove the 100% height from content and it's background color extends with the text. You can then use Dan Cedarholm's "Faux Columns" technique to extend the background color of the sidebars.


1:12 am on Aug 27, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 7, 2004
votes: 0

ok for future reference here's what I did.

My design called for two vertically repeated images to be placed either side of the variable width content area. Originally I had planned to have the page display as it is show above. I needed to have the two side columns at least the length of the view port but also extend down further if the content was too big for one screen.

I looked at the faux column [www.] article as cEM suggested but because my center content has a variable width one background image wasn't going to work.

So my final solution was to vertically tile the left image as the background of the <body> tag. Then apply the right vertically tiled image to the background of the content <div>. Then I set the min-height of the content to 100% but IE doesn't support min-height properly. So I used Prop-Clear [greywyvern.com] to fix this up.

Final Code:

body {height:100%; margin:0; padding:0; background-image:url(left.jpg); background-repeat:repeat-y; background-position:top left;}
html {height:100%; margin:0; padding:0;}
#centercol {width:auto; min-width:624px; margin-left:82px; padding-right:80px; background-image:url(right.jpg); background-repeat:repeat-y; background-position:top right;}
#prop {width:1px; height:100%; float:right; }
#footer {clear:both; overflow:hidden; height:1px;}

<div id="leftcol"></div>
<div id="rightcol"></div>
<div id="centercol">
<div id="prop"></div>
<div id="footer"></div>

There you have it a design which uses two background images to border a the variable width and height. This will look good no matter how much content there is on the page or what size the browser window is.

Any comments on this final solution would be appreciated.