Jump to content

Archived

This topic is now archived and is closed to further replies.

SharkBait

2 Column Layout with floats

Recommended Posts

I'm stuck, and not sure how I go about doing it.

Currently I am using a 2 column layout with floating div tags. The right div is 150px and the right tag is 650px.

The issue I have is that if the left column is longer than the right column, then the right column does not expand all the way down to the bottom of the page and since my background colour is different than the colour of the right div tag, it looks bad.

How can I fix this, without using the CSS attribute max_height (since IE doesn't recognise that)?

Share this post


Link to post
Share on other sites
you've got to use pseudo-columns. basically, you want to "fake" the background-color of the right column. you can do this by making a 1px tall image the full width of your page. the right 150px of that image will be the background-color of your right hand column, and the rest of the image would be the background-color of the left column. then, all you have to do is set it as the background of your body (or containing div) with a repeat-y and align top left, and you're good. of course, your containing div would have to have some sort of clear fix on it to be sure it drops below both columns... check out [url=http://www.positioniseverything/easyclearing]this tutorial and code snippet[/url] for the best way to clear floats in all browsers.

Share this post


Link to post
Share on other sites
if the left column is the column floated then simply insert <div class="clear"></div> immediately before the closing tag of your right column.

Then in your style sheet place

div.clear {
clear: both;
}

If it is the right column that is floated then obsidians method is the only viable option to get it to LOOK like it works.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.