PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Nov 23, 2014 3:57 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 11 posts ] 
Author Message
 Post subject: Two column CSS
PostPosted: Thu Jul 12, 2007 1:49 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6259
Location: Winnipeg
A common problem I experience in making two column designs is that because I also utilize a header/footer approach one of the columns always ends up bleeding through and under the footer.

Syntax: [ Download ] [ Hide ]
<div style='position: absolute; '>

  Left Column

</div>

<div style='position: relative; left: 50%; width: 50%'>

  Right Column

</div>



 


If Left Column is now greater in content than Right Column because of the absolute identifer the content doesn't "push" the DIV down to reflect it's content. However Right Column because it's relative does adjust as expected. I have tried wrapping the two DIV's inside a container DIV but that doesn't work. I was sure I seen a CSS property which "cleared" some attribute and forced the DIV to adjust.

I'm not sure if the right DIV can be a child of the other or visa-versa as one of the columns is being added programatically...if that makes anysense...so ideally I need a layout which is dual sibling DIV's which render nicely as expected...

Any ideas? :)


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jul 12, 2007 4:37 am 
Offline
Forum Contributor
User avatar

Joined: Wed Jun 13, 2007 9:43 am
Posts: 252
Location: Ukraine, Kharkov
Maybe you are looking for something like this?
Syntax: [ Download ] [ Hide ]
        <div style="width:800px; overflow:hidden;">

                <div style="float:left; width: 50%;">

                  Left Column

                </div>

                <div style="float:left; width: 50%;">

                  Right Column

                </div>

        </div>


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jul 12, 2007 5:15 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6259
Location: Winnipeg
Hmmmmm...that might work :)

Thanks for that :)


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jul 12, 2007 5:38 am 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
Gente's solution works fine. Watch out with the percentages though. Sometimes 50% + 50% is > 100% due to rounding errors. And in that case IE drops one of the floats below the other. I usually set the percentages a fraction lower, to keep a bit of "margin"


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jul 12, 2007 5:50 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6259
Location: Winnipeg
matthijs wrote:
Gente's solution works fine. Watch out with the percentages though. Sometimes 50% + 50% is > 100% due to rounding errors. And in that case IE drops one of the floats below the other. I usually set the percentages a fraction lower, to keep a bit of "margin"


Thanks for the heads up. I'll keep that in mind. :)


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jul 12, 2007 9:08 am 
Offline
Forum Contributor
User avatar

Joined: Tue May 23, 2006 10:42 am
Posts: 351
Just to kinda add to the mix:
Syntax: [ Download ] [ Hide ]

<div style="clear:both;">&nbsp;</div>

 


That will make sure any currently floating elements don't float over that div and below. I add the &nbsp; (code for a single space character) because IE6 needs data in the div for it to render properly (surprising, isn't it).


Top
 Profile  
 
 Post subject:
PostPosted: Thu Jul 12, 2007 9:32 am 
Offline
Admin
User avatar

Joined: Wed Aug 13, 2003 7:02 am
Posts: 4522
Location: York, UK
or, you can put the left and right divs in a container then add this style to the container

Syntax: [ Download ] [ Hide ]
.container:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; }


Top
 Profile  
 
 Post subject:
PostPosted: Fri Jul 13, 2007 4:34 pm 
Offline
Site Administrator
User avatar

Joined: Tue Sep 09, 2003 6:04 pm
Posts: 14293
Location: Fremont, CA, USA
IE won't understand the :after pseudo class though.

Are you trying make your footers always end up below the body (nav + content)? There are a few easy ways to do that.


Top
 Profile  
 
 Post subject:
PostPosted: Sat Jul 14, 2007 1:32 am 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
There is no talk of a footer at all.

So it seems everybody is so eager to help, they post solutions to a problem which doesn't (yet) exist. Can you imagine how helpful this forum is! :)


Top
 Profile  
 
 Post subject:
PostPosted: Sat Jul 14, 2007 1:37 am 
Offline
DevNet Evangelist

Joined: Tue Dec 21, 2004 6:00 pm
Posts: 6259
Location: Winnipeg
TheMoose wrote:
Just to kinda add to the mix:
Syntax: [ Download ] [ Hide ]
<div style="clear:both;">&nbsp;</div>
 


That will make sure any currently floating elements don't float over that div and below. I add the &nbsp; (code for a single space character) because IE6 needs data in the div for it to render properly (surprising, isn't it).


I have used this:

Syntax: [ Download ] [ Hide ]
<div style="clear: both"></div>


Works fine in IE 6.0.2900 :?

I apologize for the confusion but yes, there was a footer. Moose's suggesiton worked but I had to place that DIV immediately after the two columns to clear their float-ness and to push the footer down instead of under-lapping them.


Top
 Profile  
 
 Post subject:
PostPosted: Sat Jul 14, 2007 1:47 am 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
If you already have a footer in place, then you don't need a separate element. Clear the footer itself. Keeps your HTML a bit cleaner.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 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