3 column layout in CSS
Moderator: General Moderators
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
3 column layout in CSS
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
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
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
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
Sry, missed this.PCSpectra wrote:that also houses a header and a footer
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
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
Yes, have a look at http://www.quirksmode.org/css/clearing.html
Re: 3 column layout in CSS
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.