Clearing problem

Clearing a image in 2-column layout

[Bonusbana]

Hi

I have a two column layout with a floating menu div to the left and a content div to the right:

<div id="main">
<div id="left">
<!-- left content -->
</div>
<div id="content">
<!-- right content -->
</div>
</div>

#main {
position: relative;
}

#left {
margin: 0 0 0 195px;
padding: 15px;
}

#content {
float: left;
width: 150px;
padding: 15px;
}

Now I would like to add floating images to my content area like this:

<div id="content">
<img src="image.jpg" class="left">
<p>content goes here</p>
<div class="hr"></div>
<img src="image2.jpg" class="left">
<p>next article goes here</p>
</div>

The images should be left-floating like this:

img.left {
float: left;
background: #fff;
border: 1px solid #e3dfd7;
padding: 3px;
margin: 0 10px 5px 0;
}

and the HR div contains a clearing to force the hr to display below the text & image:

.hr {
display: block;
padding: 0;
height: 1px;
line-height: 1px;
font-size: 1px;
border-bottom: 1px solid #e3dfd7;
margin: 15px 0;
clear: left;
}

My problem is that when I use a clear: left, the left column of my layout affects the content area, so i get a huge spacer after the first paragraph. I was wondering if anyone had a nifty solution to this problem, basically I would like to clear the left area of the content area, not the whole layout.

Any reply is apprechiated.

.david

[Bonusbana]

bump

[Bonusbana]

Doesnt anyone have a clue__?

[bill]

..yup. You have to use a source ordered layout or else you're out of spec. I had to dump my 3 column layout on one site and use another because of this same problem.

thread: Cleared div messes up Opera [webmasterworld.com]