Page 1 of 1

3 column layout in CSS

Posted: Fri Oct 10, 2008 10:55 pm
by alex.barylski
I have reada few articles on ALA and others but none seem to address my concerns...

Basically I have three, fixed width, variable height columns which sit inside a container that also houses a header and a footer.

I could float, using positioning or maybe display inline however each has it's disavnatages.

If I float (memory serves me correctly) then the columns will bleed over (or outside of the column area on to the footer, which is not desired.

If I display inline I seem to lose all control over the width of the columns.

If I use positioning...it feels hackish.

What technique can I use given three variable height, fixed width columns that cannot overlay a footer??? Article resource would be nice or if you have any ideas?

Cheers,
Alex

Re: 3 column layout in CSS

Posted: Fri Oct 10, 2008 10:57 pm
by alex.barylski
http://www.alistapart.com/articles/holygrail

This might be it right here... :drunk: :banghead:

Re: 3 column layout in CSS

Posted: Sat Oct 11, 2008 5:09 am
by kaszu
Easiest is to clear the float

Code: Select all

#col1, #col2, #col3 {
    width: 200px;
    float: left;
}
#container {
    width: 100%;
    overflow: hidden;
}

Re: 3 column layout in CSS

Posted: Mon Oct 13, 2008 1:49 am
by alex.barylski
Wouldn't overflow: hidden result in container still swallowing the contents but this time the footer would be over top of the contents?

Re: 3 column layout in CSS

Posted: Mon Oct 13, 2008 3:25 pm
by kaszu
PCSpectra wrote:that also houses a header and a footer
Sry, missed this.
overflow: hidden will work only if floated elements are inside the container. Header and footer must be outside.

Re: 3 column layout in CSS

Posted: Tue Oct 14, 2008 7:05 am
by alex.barylski
ahh so clearing a float will stopp the contained elements from further floating over their container, so header and footer are outside for that reason???

Re: 3 column layout in CSS

Posted: Tue Oct 14, 2008 12:35 pm
by kaszu

Re: 3 column layout in CSS

Posted: Wed Oct 15, 2008 3:55 pm
by pingeyeg
Yes, whenever you have a float: left and float: right you always have to have your footer with a clear: both to have it always push below everything. Otherwise, you are left with the footer trying to escape from below and ending up somewhere on the right hand section.