div flowing over

[kellan4459]

I have the following design

<div class="bodycontainer">

<div class="contactLeft">
email
address
map
</div>
<div class="contactRight">
contact form
</div>
<hr>
</div> <!-- bodycontainer -->

css has
.contactLeft {
float: left;
clear: left;
}
.contactRight {
float: right;
clear: right;
}


The problem is that the <hr> is not below the div's even though I have the clears to end the floats. It is either behind them or shifted over at the top. Is there something else that will allow the rest of the page to flow after the floated div's?

 

[Vragabond]

You can't clear floats at the time you make them float. It has to happen after the float -- either the next element will clear them or you can do it via the :after pseudo class (which is not supported by all modern browsers). Give hr style of [tt]clear: both;[/tt] and you should be OK. As is, your floats are not performing any function.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kellan4459]

awesome, that makes more sense. the tutorial I found had clear in the same element but after your explanation I think they were clearing it for the element above since they were stacking divs down the side. Thanks again for your help and clear explanations.