CSS Three Column Layout - Column Height Problem
-
I have the following HTML:
<body>
<div id="container"> <div id="top"> <h1>Header</h1> </div> <div id="leftnav"> <p>Left bar</p> </div> <div id="rightnav"> <p>Right bar</p> </div> <div id="content"> <p>Content</p> </div> <div id="footer"> <h4>Footer</h4> </div> </div></body>
and this CSS:
body
{
font-family: Verdana, Sans-Serif;
font-size:0.75em;
line-height:1.5em;
margin:1.5em;}
#container
{
overflow:hidden;
min-width: 50em;
margin: 0.625em auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}#top
{
padding: 0.5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}#top h1
{
padding: 0;
margin: 0;
}#leftnav
{
float: left;
width: 10em;
margin: 0;
padding: 1em;
background-color:#ec7;
}#rightnav
{
float: right;
width: 10em;
margin: 0;
padding: 1em;
background-color:#db6;
}#content
{
margin-left: 10em;
margin-right: 10em;
padding-left:3em;
padding-right:3em;
padding-top:1em;
min-width:10em;
text-align:justify;
background-color:#bab;
}#leftnav, #rightnav, #content
{
padding-bottom:1000em;
margin-bottom:-1000em;
}#footer
{
clear: both;
margin: 0;
padding: 0.5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}The three DIVs (leftnav, content, rightnav) should be displayed as columns between top and footer DIVs. I managed this, but the 'columns' are not the same height when displayed (ie. the background color only extends as far as the text). This appears to be a common problem and I have found several workarounds. I have attempted to implement this one[^] but only the 'content' column extends properly. leftnav and rightnav background extends over the footer DIV covering its background (although the text 'Footer' is still visible). I would like all three columns to extend only as fa
-
I have the following HTML:
<body>
<div id="container"> <div id="top"> <h1>Header</h1> </div> <div id="leftnav"> <p>Left bar</p> </div> <div id="rightnav"> <p>Right bar</p> </div> <div id="content"> <p>Content</p> </div> <div id="footer"> <h4>Footer</h4> </div> </div></body>
and this CSS:
body
{
font-family: Verdana, Sans-Serif;
font-size:0.75em;
line-height:1.5em;
margin:1.5em;}
#container
{
overflow:hidden;
min-width: 50em;
margin: 0.625em auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}#top
{
padding: 0.5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}#top h1
{
padding: 0;
margin: 0;
}#leftnav
{
float: left;
width: 10em;
margin: 0;
padding: 1em;
background-color:#ec7;
}#rightnav
{
float: right;
width: 10em;
margin: 0;
padding: 1em;
background-color:#db6;
}#content
{
margin-left: 10em;
margin-right: 10em;
padding-left:3em;
padding-right:3em;
padding-top:1em;
min-width:10em;
text-align:justify;
background-color:#bab;
}#leftnav, #rightnav, #content
{
padding-bottom:1000em;
margin-bottom:-1000em;
}#footer
{
clear: both;
margin: 0;
padding: 0.5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}The three DIVs (leftnav, content, rightnav) should be displayed as columns between top and footer DIVs. I managed this, but the 'columns' are not the same height when displayed (ie. the background color only extends as far as the text). This appears to be a common problem and I have found several workarounds. I have attempted to implement this one[^] but only the 'content' column extends properly. leftnav and rightnav background extends over the footer DIV covering its background (although the text 'Footer' is still visible). I would like all three columns to extend only as fa
ha ha welcome to the weird and wonderful world of CSS.... there are entire websites devoted to this very topic, books even, and I wouldn't be surprised if there was a goddam TV series as well. Can't be done, is the simple answer. The slightly longer one is that it can, but the hacks required will be too browser-specific to make it usable in the real world. If you can get away with fixed-width columns you can force an answer using a background image. Otherwise, my serious advice (which will save you hours if not days of stress and frustration) is to use a table-based layout. Problem solved in two minutes. (And if anyone tries to tell you you can't use tables for web-page layout, just look pityingly at them, smile knowingly and walk away...)
-
ha ha welcome to the weird and wonderful world of CSS.... there are entire websites devoted to this very topic, books even, and I wouldn't be surprised if there was a goddam TV series as well. Can't be done, is the simple answer. The slightly longer one is that it can, but the hacks required will be too browser-specific to make it usable in the real world. If you can get away with fixed-width columns you can force an answer using a background image. Otherwise, my serious advice (which will save you hours if not days of stress and frustration) is to use a table-based layout. Problem solved in two minutes. (And if anyone tries to tell you you can't use tables for web-page layout, just look pityingly at them, smile knowingly and walk away...)
Thank you for the answer. I realize that this is possible to achieve using tables (although I haven't tried it).
The bearing of a child takes nine months, no matter how many women are assigned.
-
Thank you for the answer. I realize that this is possible to achieve using tables (although I haven't tried it).
The bearing of a child takes nine months, no matter how many women are assigned.
Actually, what I did wrong was putting the header and footer DIVs into the container DIV along with the three columns. When I put them out the layout works better:
<body>
<div id="top"> <h1>Header</h1> </div> <div id="container"> <div id="leftnav"> <p>Left bar</p> </div> <div id="rightnav"> <p>Right bar</p> </div> <div id="content"> <p>Content</p> </div> </div> <div id="footer"> <h4>Footer</h4> </div></body>
The bearing of a child takes nine months, no matter how many women are assigned.
-
Actually, what I did wrong was putting the header and footer DIVs into the container DIV along with the three columns. When I put them out the layout works better:
<body>
<div id="top"> <h1>Header</h1> </div> <div id="container"> <div id="leftnav"> <p>Left bar</p> </div> <div id="rightnav"> <p>Right bar</p> </div> <div id="content"> <p>Content</p> </div> </div> <div id="footer"> <h4>Footer</h4> </div></body>
The bearing of a child takes nine months, no matter how many women are assigned.
Nice enough in Firefox and Chrome - you might want to look at it in IE though...
-
Nice enough in Firefox and Chrome - you might want to look at it in IE though...
-
-
:omg: Now I'm really confused. Why are we getting two different pages?
The bearing of a child takes nine months, no matter how many women are assigned.
-
Never mind, I think I figured it out - off to learn about quirks mode.[^]. This is getting quite interesting.
The bearing of a child takes nine months, no matter how many women are assigned.
-
:omg: Now I'm really confused. Why are we getting two different pages?
The bearing of a child takes nine months, no matter how many women are assigned.
(Been distracted by World Cup final...) Well, such are the joys of CSS. Come back tables, all is forgiven....
-
Never mind, I think I figured it out - off to learn about quirks mode.[^]. This is getting quite interesting.
The bearing of a child takes nine months, no matter how many women are assigned.
Actually, my fault here: I hadn;t specified a doctype in my html - add
and it works fine in IE8... ..however, I suspect you'll still find you have problems in the imfamous IE6 (and below...), if that worries you. (It was back in those days I last looked at this problem, and quickly realised I was on to a hiding to nothing. I guess things have improved a bit since then...)
-
ha ha welcome to the weird and wonderful world of CSS.... there are entire websites devoted to this very topic, books even, and I wouldn't be surprised if there was a goddam TV series as well. Can't be done, is the simple answer. The slightly longer one is that it can, but the hacks required will be too browser-specific to make it usable in the real world. If you can get away with fixed-width columns you can force an answer using a background image. Otherwise, my serious advice (which will save you hours if not days of stress and frustration) is to use a table-based layout. Problem solved in two minutes. (And if anyone tries to tell you you can't use tables for web-page layout, just look pityingly at them, smile knowingly and walk away...)
I mix Tables in Divs all the time. Makes for neat presentation and ease of use. Bollocks to the CSS Nazis who say it is wrong, If it works, it is right.
------------------------------------ I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
-
I mix Tables in Divs all the time. Makes for neat presentation and ease of use. Bollocks to the CSS Nazis who say it is wrong, If it works, it is right.
------------------------------------ I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
With IE, using tables (particularly large wrapping layout tables) can cause an apparent delay with each page load (as IE doesn't render a table until it hits the close tag). If you can live with it, then there's no reason why not in my book.
