Dreamweaver - CSS and controlling page height

Author

CSS and controlling page height

Mark

2004-08-05, 12:15 pm

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

Osgood

2004-08-05, 12:15 pm

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>

Osgood

2004-08-05, 12:15 pm

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:
>
>
>
> 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>
>

Mark

2004-08-05, 7:15 pm

Thanks Ossie - up the blues!