<hr /> and clear:left

[Krakatoa]

http://www.krakatoa.it/ot/dev.htm

This page is made of 3 blocks, left, right and middle.
The middle box is again divided in 2 blocks, where the left part is the content one.
The problem is that here, after the news titles and text, the <hr /> should go below the picture. So I gave it a clear:left, but this cancels all the floats to its left, so that the <hr /> goes down to the end of the left box, that is:

http://www.krakatoa.it/ot/dev2.htm

What can I do with this layout???
Please help me!!!

[Pheonix]

The second one works fine, i'm not realy sure what the problem is :S

[Krakatoa]

No it does not!
Can't you see that the second <hr /> goes down to the end of the left menu, leaving a blank space?

[Pheonix]

No, I cannot, there is no HR at the end of the left menu

[Krakatoa]

Look here:
http://www.krakatoa.it/ot/as_is.jpg
There should not be all that red space!

This is how it should be:
http://www.krakatoa.it/ot/as_should_be.jpg

Anyway I already found the solution.
I nested a div with a float:left inside the content_left div and it works great!

[drd]

You have to be very careful when styling the <hr /> tag, IE uses different properties to the other browsers, so to get the colour the same across different browsers you have to specify both background-color and color as the same value:

Code: Select all

hr { margin: 10px 0px; height: 1px; background: #444; color: #444 }

I've had more luck specifying margins to control the position of the hr rather than floating it as Opera tended to display it differently to other browsers if I floated the hr.

I hope that helps.

EDIT: Arrrrgh only just noticed you already found a solution. Good work.