PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sat Feb 24, 2018 11:06 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 8 posts ] 
Author Message
 Post subject: 3 column layout in CSS
PostPosted: Fri Oct 10, 2008 10:55 pm 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6267
Location: Winnipeg
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


Top
 Profile  
 
PostPosted: Fri Oct 10, 2008 10:57 pm 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6267
Location: Winnipeg
http://www.alistapart.com/articles/holygrail

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


Top
 Profile  
 
PostPosted: Sat Oct 11, 2008 5:09 am 
Offline
Forum Regular
User avatar

Joined: Wed Jul 19, 2006 7:29 am
Posts: 749
Easiest is to clear the float
Syntax: [ Download ] [ Hide ]
#col1, #col2, #col3 {
    width: 200px;
    float: left;
}
#container {
    width: 100%;
    overflow: hidden;
}


Top
 Profile  
 
PostPosted: Mon Oct 13, 2008 1:49 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6267
Location: Winnipeg
Wouldn't overflow: hidden result in container still swallowing the contents but this time the footer would be over top of the contents?


Top
 Profile  
 
PostPosted: Mon Oct 13, 2008 3:25 pm 
Offline
Forum Regular
User avatar

Joined: Wed Jul 19, 2006 7:29 am
Posts: 749
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.


Top
 Profile  
 
PostPosted: Tue Oct 14, 2008 7:05 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6267
Location: Winnipeg
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???


Top
 Profile  
 
PostPosted: Tue Oct 14, 2008 12:35 pm 
Offline
Forum Regular
User avatar

Joined: Wed Jul 19, 2006 7:29 am
Posts: 749
Yes, have a look at http://www.quirksmode.org/css/clearing.html


Top
 Profile  
 
PostPosted: Wed Oct 15, 2008 3:55 pm 
Offline
Forum Newbie

Joined: Wed Oct 15, 2008 2:33 pm
Posts: 10
Location: Atlanta, GA
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 8 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group