Jump to content

2 Column Layout with floats


SharkBait

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)?
Link to comment
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.
Link to comment
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.