Проблема с float'ом

[Spidey]

<div style="width:80%; min-height:500px; background:#CCCCCC; margin:0 auto; position:relative;">

<div style="width:100px; min-height:500px; background:red; float:left;"></div>

<div style="width:70%; max-width:800px; min-height:300px; background:black; margin:0 auto; color:#FFFFFF;"></div>

<div style="width:100px; min-height:500px; background:red; float:right;"></div><br clear="all" />

</div>

Правый красный блок съезжает! Нужно что бы у красных было float:left; и float:right; соответственно, а черный центрировался между ними! Но что бы при растягивании каждого по высоте тянулся и серый блок в котором и находятся эти 3 блока!

[psywalker]

<div style="width:80%; min-height:500px; background:#CCCCCC; margin:0 auto; position:relative;">

<div style="width:100px; min-height:500px; background:red; float:left;"></div>

<div style="width:100px; min-height:500px; background:red; float:right;"></div><br clear="all" />

<div style="overflow: hidden;max-width:800px; min-height:300px; background:black;color:#FFFFFF;"></div>



</div>

[Softlink]

<div style="width:80%; min-height:500px; background:#CCCCCC; margin:0 auto; position:relative; overflow:hidden;">
	<div style="width:100px; min-height:500px; background:red; float:right;"></div>
	<div style="width:100px; min-height:500px; background:red; float:left;"></div>
	<div style="max-width:800px; min-height:300px; background:black;color:#FFFFFF; margin:0 auto;"></div>
</div>

так?

[Spidey]

<div style="width:80%; min-height:500px; background:#CCCCCC; margin:0 auto; position:relative; overflow:hidden;">
	<div style="width:100px; min-height:500px; background:red; float:right;"></div>
	<div style="width:100px; min-height:500px; background:red; float:left;"></div>
	<div style="max-width:800px; min-height:300px; background:black;color:#FFFFFF; margin:0 auto;"></div>
</div>

так?

Yes! Thanks =)