Caixa com mesma altura ou altura mínima

[lahlahbarros 0]

Ok, meu layout é feito apenas com divs e puro CSS.

Ele contém um container que contém todos os outros elementos do layout e centraliza-os.

Ele tem um topo, um menu esquerdo e um de conteúdo.

 

Esse é o CSS:

 

div#topo{position:relative; height: 295px;}div#container{text-align:left}div#conteudo p{line-height:1.4}div#rodape{background: #3B393A;color: #FFF; text-align: center;}div#rodape p{margin:0;padding:5px 10px}div#rodape a{display:inline;padding:0;color: #1DB5B5}div#container{width:780px;margin:0 auto; background: #FFFFFF url('ayout.gif') no-repeat top left;}div#conteudo{float:right;width:580px}div#esquerda{float:left;width:184px;}div#rodape{clear:both;width:100%}

Ok, nesse de conteúdo, eu quero colocar mais quadro "caixas", duas lado a lado horizontalmente. Então, eu fiz isso:

 

.metade2 {background:#FFFFFF;width: 280px; float: left;padding: 0px;margin: 0px;}

E no HTML, fica mais ou menos assim:

 

<div id="container"><div id="topo">AQUI VAI O TOPO E O MENU DE TOPO</div><div id="esquerda">AQUI VAI O MENU COM ALGUMAS INFORMAÇÕES</div><div id="conteudo"><div class="metade2">AQUI VAI A CAIXA 1</div><div class="metade2">AQUI VAI A CAIXA 2 QUE FICA DO LADO DA 1</div><div class="metade2">AQUI VAI A CAIXA 3</div><div class="metade2">AQUI VAI A CAIXA 4 QUE FICA DO LADO DA 3</div></div></div>

O problema é que quando a caixa 1 ou caixa 3 excedem o tamanho das que ficam do lado dela, o layout fica todo bagunçado. :/ Como fazer para que elas tenham uma altura idêntica, fazendo com que quando uma aumente a outra também aumente?

 

Eu tentei o clear; both.

 

Mas bagunçou ainda mais, ficando uma embaixo da outra.

Alguém pode me ajudar?

 

Obrigada, desde já.

[lahlahbarros 0]

ok, funcionou.muito obrigada. ;)