CSS and controlling page height

I've got a site template with a 2 column layout, with the left column
absolutely positioned in the the margin space specified for the right
column.

These 2 columns sit within container divs which control backgoround color,
centering etc.

For 95% of pages the content in the right column is longer than the left, so
the container divs stretch accordingly.

For the other 5% the left column, because it's absolutely positioned,
doesn't stretch the container divs, so I've put a few carriage returns at
the end of the right column content.

Is there a better way? This is the only thing I miss about table controlled
layouts - they seem more stretchy friendly.

Mark

Mark wrote:

Is there a better way? This is the only thing I miss about table controlled
layouts - they seem more stretchy friendly.

Yes, the basic principle is to float two <divs> which have been inserted
into a container <div>. Then use a background image (slab of color) in
the container <div>.

To make the container <div> wrap itself around the two floated <divs>
use a another <div> inserted directly before the closing container
</div> tag with the css property clear: both;

If you take the simple example below, add a bg image to the container
<div> then you can type as much or as little as you want in either of
the two inserted <divs>



<div style="width: 700px; margin: 0 auto">
<div style="float: left; width: 250px">Left</div>
<div style="float: left; width: 450px">Right</div>
<div style="clear: both; height: 1px; overflow: hidden; line-height:
1px; margin-top:-1px"></div>
</div>

If you just want a plain color bg then simply add background-color:
#ab1; or whatever color you want to the container <div> style.



<div style="width: 700px; background-color: #ab1; margin: 0 auto">




Osgood wrote:

Mark wrote:

Is there a better way? This is the only thing I miss about table
controlled
layouts - they seem more stretchy friendly.


Yes, the basic principle is to float two <divs> which have been inserted
into a container <div>. Then use a background image (slab of color) in
the container <div>.

To make the container <div> wrap itself around the two floated <divs
use a another <div> inserted directly before the closing container
/div> tag with the css property clear: both;

If you take the simple example below, add a bg image to the container
div> then you can type as much or as little as you want in either of
the two inserted <divs



div style="width: 700px; margin: 0 auto"
div style="float: left; width: 250px">Left</div
div style="float: left; width: 450px">Right</div
div style="clear: both; height: 1px; overflow: hidden; line-height:
1px; margin-top:-1px"></div
/div

Thanks Ossie - up the blues!