Forum Moderators: not2easy
Okay, I'm struggling with the basic 3 column layout, with all 3 columns reaching the footer. I have incorporated body{height:100%;} and div {height:100%;}, but still it's not right.
If anyone has any advice, I'd love to hear it ... the CSS I have is below. There are other tags on the sheet, but this is the order that these appear in.
Thanks in advance,
David
body
{
margin:10px 10px 0px 10px;
font:13px/1.2 Geneva, arial, verdana, Helvetica, sans-serif;
padding:0px;
height:100%;
}
div
{
height:100%;
}
#centercontent {
background:#fff;
padding-top:10px;
margin-left: 179px;
margin-right:199px;
border-bottom:1px solid #cccccc;
}
#leftcontent {
position: absolute;
left:10px;
width:180px;
padding-top:10px;
border-left:1px solid #000000;
border-bottom:1px solid #cccccc;
background:#fff;
}
#rightcontent {
position: absolute;
right:10px;
padding-top:10px;
width:200px;
background:#fff;
border-right:1px solid #000000;
border-bottom:1px solid #cccccc;
}
I evaluated the problem of the 3-column CSS layout some time ago, and I have to say I found *no* really convincing cross-browser-safe solution for it, neither here nor anywhere else on the web. All "solutions" had their own very specific advantages and disadvantages. One of the more ambitious ones used JavaScript to adjust column heights, and another quite good solution used 5 or 6 nested <div>s. (Go figure! :-)
Well, therefore my approach to the 3-column layout is this:
First of all, the basic CSS philosophy - as far as I understood - is to avoid purely presentational tags in favor of "semantic markup" -- an approach that I completely appreciate. I think this is how it ideally should be.
All of the known solutions for the 3-column CSS layout problem, however, involve the use of at least some purely presentational tags.
Well, if I *have* to use presentational tags to solve this problem (and it's clear that you have to), why not simply use a <table>? This, in my eyes, is certainly the most straigtforward approach to the 3-column layout, a strategy also favored by Eric Meyer, if I interpret him correctly ("tables aren't evil").
Personally I dislike (mis)using HTML for purposes it was never made for. (Which is why I'm grateful for CSS.) But the same argument IMO holds for CSS as well.
As for me this meant: Use a <table> for Christ's sake, if it seems appropriate and simplifies your code. Case closed.
I only use tables for tabular data, I'm 100% CSS. Take a look at the code below and see if you can adapt it to your situation. The absolute positioning - it uses floats. Also, it does NOT use heights in any div. (I use classes mostly instead of divs, but it should work the same. There are many resources for CSS. One of my favorites for three columns is [css-discuss.incutio.com...]
What I do is drop the height in all divs. I set up the center where it is inside the left. The CSS validates, clean header and footer. It works in mozilla, IE6, Opera7 and Netscape 7.1. You will notice I use the body background to take care of the right div from not going all the way to the footer. Also notice how I did the borders.
body { color: #000; background-color: #EEE; padding: 10px; margin: 0px;}
#main {width: 100%; background-color:transparent; border-left: 1px solid #AAA; border-right: 1px solid #AAA;}
.center {width: 75%; float:right; background-color:#FFF; padding-left: 15px;
border-left: 1px solid #AAA; border-right: 1px solid #AAA;}
.leftcol {width: 80%; float:left; background-color:#EEE; }
.rightcol {width: 20%; float:right; background-color:#EEE;}
.head {width: 100%; background-color:#FFF;}
.foot {width:100%; background-color:BLUE; font-size: 11px; color: #FFF; }
Play around with this. It works for me. I'm no CSS expert, but after studying this stuff for 7 months now, I'm getting better.
Hope that helps, WFN:)
If you define height:100% for any element, its box really is 100% high. However the difference is in interpretation. While CSS Spec refers to the height of the parent box, you probably mean the height of the browser window. Unfortunately (in fact fortunately) there is nothing like that in CSS.
Implicit height of any box equals to the height of its content. Consequently you cannot define the height of an inner box as a percentage of its outer box. You can do it only if the outer box has explicit height.
- I have achieved the desired result using a one celled table. Okay, so hardcore CSS'ers are quite entitled to turn their noses up at it - but I'm all about practical solutions, so this worked nicely.
- I also achieved the desired results by putting the #centercontent, and other #content div's nested within a #wrapper div that specified body:100%; - this seems to work well, although only tested so far in IE5 & 6.
- There seems to be a consensus across all the CSS boards I've looked at, that there's no pure way of doing this and ensuring x-browser compatability. That seems odd to me, but I'm very much a css newbie, so I'll keep on learning.
Thanks again - this forum is the best out there, and I really appreciate how quickly people get back to questions. I hope I can be useful too, someday!
David
