3 column layout in CSS

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

3 column layout in CSS

Post 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
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: 3 column layout in CSS

Post by alex.barylski »

http://www.alistapart.com/articles/holygrail

This might be it right here... :drunk: :banghead:
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: 3 column layout in CSS

Post by kaszu »

Easiest is to clear the float

Code: Select all

#col1, #col2, #col3 {
    width: 200px;
    float: left;
}
#container {
    width: 100%;
    overflow: hidden;
}
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: 3 column layout in CSS

Post 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?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: 3 column layout in CSS

Post 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.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Re: 3 column layout in CSS

Post 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???
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: 3 column layout in CSS

Post by kaszu »

pingeyeg
Forum Newbie
Posts: 10
Joined: Wed Oct 15, 2008 2:33 pm
Location: Atlanta, GA

Re: 3 column layout in CSS

Post 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.
Post Reply