Layout líquido de 3 colunas

[hideout 0]

Bom, estou tendo problemas com float utilizado dentro da coluna do meio como podem ver na página abaixo:

 

http://71.18.85.205/teste.htm

 

O problema é que o OBJ 4 deveria ficar abaixo do OBJ 2, poderia fazer isso usando um clear, mas se eu fizer isso o OBJ4 fica no mesmo nivel que o rodape, outra solução que eu estava tentando, era colocar float: right no obj 3, mas precisaria especificar um valor width, pois se não, ele fica do tamanho do conteudo dele, como o layout é líquido não consegui.

 

Segue o código:

 

* { margin: 0 }body { padding: 0; }p { margin: 0 0 15px 0; }#lateral, #conteudo, #menu, #rodape, #topo {font: 7.5pt Verdana, Tahoma, Arial;}#geral, #menu, #lateral { background-color: #8DC37E; }#topo {background-color: #1C8000;height: 100px;}#menu, #lateral {width: 150px;height: 200px;padding: 10px;}#menu { float: left; }#lateral { float: right; }html>body #menu, html>body #lateral { width: 130px; }#conteudo {background-color: #FFFFFF;margin: 0 150px;padding: 10px;height: 200px;}#rodape {background-color: #1C8000;height: 40px;clear: both;}#obj_um {	background-color: #FFCC99;	padding-bottom: 20px;}#obj_dois {	float: left;	width: 150px;	height: 100px;	background-color: #99CCCC;}#obj_tres {	background-color: #CCFFCC;	height: 20px;	margin-left: 160px;}#obj_quatro {	background-color: #CC9900;	height: 80px;}

<div id="geral">		<div id="topo"><h1>Topo</h1></div>		<div id="menu"><h2>Menu</h2></div>		<div id="lateral"><h2>Menu</h2></div>		<div id="conteudo">			<div id="obj_um">				<h2>Obj 1</h2>				<div id="obj_dois"><h2>Obj 2</h2></div>				<div id="obj_tres"><h2>Obj 3</h2></div>			</div>			<div id="obj_quatro"><h2>Obj 4</h2></div>		</div>		<div id="rodape"><h3>Rodapé</h3></div>	</div>

[hideout 0]

Descobri a solução, coloquei display: table e width: 100% no OBJ 1, coisa simples que não tinha feito antes http://forum.imasters.com.br/public/style_emoticons/default/joia.gif .

[Maujor 144]

Experimenta declarar:

float:left;

width:100%;

para os obj_um e obj_quatro