Left div doesn't stretch 100%

[moesian]

Hi,

I've got a problem with the following code:

<div style="border:thin solid #33FF33;" >

<div style="float:left; display:inline; width:7px; border:thin solid #33FF33; height:100%; display:block;"></div>
<div style="margin-left:7px; border:thin solid #9999FF;"<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

Inside the main div are two divs one containing text and one to the left of it, I want the div on the left to stretch to the height of the div containing the text, it's driving me crazy.

Any help would be much appreciated.

Thanks

[SixTimesEight]

I don't think there is a way to do that.

I usually cope with this be creating the appearance of a column by using a vertically repeating background image that spans across both columns.

[Marshall]

Not sure what you're trying to achieve, but this may come close:

<div style="border:thin solid #3F3;" >

<div style="margin-left: 7px;border-left:thin solid #3F3;">
<div style="margin-left:1px; border:thin solid #99F; padding: 5px;"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>

[marcel]

Do a search for 'faux columns'. That should help you with this problem.

[moesian]

Hi,

Thanks for the help got this one cracked using something similar to whar Marshall proposed. Just got a few problems in IE6 with backgrounds, hopefully will solve this soon.

Cheers