Topic: Float a left box... float a right box (Page 1 of 1)

Hi,

I am trying to achieve 2 columns. I am floating the left column and easily the right column appears. However, I do not want the right column to *eventualy* wrap... I want the left column no matter how tall or short the left column to create a boundary for the stuff on the content on the right. I didn't say that very well, but do you understand what I'm after?

Karl

I looked at the absolute positioning method: http://positioniseverything.net/thr.col.stretch.html
The problem I have with this, is that this sort of positioning does not cause a parenet element to stretch... my two columns are within a <div> block. This block has a background color... the entire page has a vertical repeating image. So the idea is... the 2 columns stretch a white background parent element...

float them both left.

you will then need to add a block level element after the floats with a "clear:both;" to force the wrapper to expand around them.

As a side-note, the reasoning for that is explained at PIE as well. http://positioniseverything.net/articles/float-theory.html

And also, some float-related bugs you might run into (IE-specific): http://positioniseverything.net/articles/float-bugs-1.html

That site is a great float reference!

While we are on the subject (and thanks for previous.. worked great):

Lets say I wanted a 1px solid border down the middle of these two element that are floating next to each other... the border always need to extend the length of the longest column (which is an unknown)... any tips there? possibly a 3rd column stuck between the two?

Paul's great work here - http://development.gurusnetwork.com/discussion/thread/2412/

Should provide some solutions for that.