Jump to content


Photo

2 Column Layout with floats


  • Please log in to reply
2 replies to this topic

#1 SharkBait

SharkBait
  • Members
  • PipPipPip
  • Advanced Member
  • 845 posts
  • LocationMetro Vancouver, BC

Posted 26 September 2006 - 05:40 PM

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)?

#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 26 September 2006 - 06:26 PM

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 this tutorial and code snippet for the best way to clear floats in all browsers.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 27 September 2006 - 10:14 AM

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.
follow me on twitter @PHPsycho




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users