Höjd på div i annan div

Jag har en sida med 3 divar.
En div med layout och sen 2 divar med text i. problemet är att div 1 inte anpassar höjden efter divarna med text i.

I Ie blir det rätt
http://www.tibroik.com/misc/ie.png

men i firefox ser det ut så här
http://www.tibroik.com/misc/firefox.png

html

<div id="main">
            <div class="top1"></div>
            <div class="middle">
    <div id="left">
        <h5>Test</h5>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur fringilla, metus eu faucibus luctus, quam lorem viverra ante, non rutrum nunc nisl eget risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi adipiscing bibendum felis. Quisque libero. Integer lectus lorem, eleifend et, sagittis vitae, mollis at, mauris. Donec vitae neque vitae mauris cursus pellentesque. Aenean eget tellus quis risus ullamcorper eleifend. Vivamus hendrerit, lacus a placerat rutrum, erat quam tristique nibh, blandit dignissim risus pede et turpis. Cras condimentum mauris. Etiam viverra, arcu eu placerat vehicula, elit felis interdum dui, et pretium tellus lorem non pede. Praesent eu tortor. Integer ullamcorper eleifend nunc. Maecenas dolor. Aenean pretium libero sed dolor. Duis lacinia fermentum nisl. 

Mauris eu metus. Phasellus dignissim ultricies enim. Integer mi justo, dignissim ac, egestas et, porta ac, velit. Praesent interdum nisi in est. Ut id elit. Pellentesque eget tellus. Sed at urna id augue pellentesque ornare. Duis a nulla. Nam vitae purus. Cras eleifend nulla nec lacus. Sed id enim. Donec a mauris. Sed quam. Pellentesque ut pede. Sed arcu massa, feugiat pulvinar, molestie ac, accumsan sit amet, nisl. Praesent interdum eleifend sem. Pellentesque justo felis, sodales id, imperdiet id, fringilla vel, nisl. Ut tristique nulla id mi. Sed in est. 
</p>

    </div>
    <div id="right">
        <h5>Fler nyheter</h5>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>

        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>

        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>
        <h6>Rubrik</h6>

    </div>

</div>
            <div class="bottom"></div>
        </div>

css

.middle {
	background-color:#ffffff;
    background-image: url(layout/big_back.png);
    background-repeat: repeat-y;
	color: #000;
	vertical-align:top;
	text-align:left;
	padding: 5px 5px 5px 5px;
	height: 100px;
	min-height: 100px;
	margin: 0px;
}
.bottom 
{
    height: 7px;  
    background-image: url(layout/bottom.gif);
    background-repeat:no-repeat;
}
.top1 
{
    height: 7px; 
    background-image: url(layout/top.gif); 
    background-repeat:no-repeat; 
    margin: 0px;
    padding: 0px;
    line-height: 7px;
    font-size : 6px;
}
#main 
{
    padding: 0px;
    width:770px;
    margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	float:left;
	display: inline;
}
#left 
{
    padding: 5px 10px 5px 10px;
    width:470px;
    margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	float:left;
	display: inline;
	border-right: 1px solid #999;
}
#right 
{
    padding: 5px 10px 5px 10px;
    width:230px;
    margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	float:left;
}

Hur ska jag göra för att middle diven ska anpassa sig efter dom andra två divarna?

<br style="clear:both;" /> efter right diven

Det fungerade inte med

<br style="clear:both;" />

men det här fungerade

<div style="clear:both;"></div>

En fråga till. Går det göra så att höjden på right anpassar sig efter höjden på left?