Two column CSS

JavaScript and client side scripting.

Moderator: General Moderators

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

Two column CSS

Post by alex.barylski »

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.

Code: Select all

<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? :)
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Maybe you are looking for something like this?

Code: Select all

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

Post by alex.barylski »

Hmmmmm...that might work :)

Thanks for that :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

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

Post by alex.barylski »

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. :)
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

Just to kinda add to the mix:

Code: Select all

<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).
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

or, you can put the left and right divs in a container then add this style to the container

Code: Select all

.container:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; }
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

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

Post by alex.barylski »

TheMoose wrote:Just to kinda add to the mix:

Code: Select all

<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:

Code: Select all

<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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

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