floating a div

[webnoob]

i have an issue with a div overflowing to other divs.

example i have div floating left and a div floating right, but if i use a hr in the middle div it overlaps the right and left floats. how to i keep it from doing that but allow the enter div to freely wrap around both floats? eg, this is my code:

<div style="float: left; width: 130px">
<!-- ad block -->
</div>

<div style="float: right; width: 225px">
<!-- right block ad -->
</div>

<div><h1><!-- page content --></h1></div>

how do i keep the contents in the last div from overflowing the other divs? everything works fine, but if i use an <hr /> in the last div it will overflow to the other floats.

thanks for any help.

[Robin_reala]

Easiest thing to do is to give your left and right floated divs a background colour. That way they'll cover up the hr when it gos underneath them.

[createErrorMsg]

The only browser I'm able to replicate this behavior in is Opera. In FF and IE the <hr /> behaves as expected.

One solution is to apply a left and right margin to the center column equal to the widths of the ones on either side...

<div style="margin:0 225px 0 130px;"><h1><!-- page content --></h1></div>

Note that this will prevent the text content of the center column from wrapping beneath the two floats (i.e., it creates a consistent three column appearance), which may not be what you want. If so, I would use Robin_reala's background suggestion.

cEM