Height: auto e não funciona

[Lucas Santana_161162 0]

Olá novamente,

 

Bom estou montando um site é o seguinte:

 

CSS:

.meio {
background-color: #f6f6f6;
width: 1000px;
       height: auto;
margin: 0 auto;
}

/* MENU DIREITO */

#menu_right {
float: right;
width: 230px;
}

/* FIM DO MENU DIREITO */

/* CONTEUDO */

#conteudo {
width: 550px;
height: auto;
padding-left: 12px;
float: left;
color: #000;
}

/* FIM DO CONTEUDO */

 

PHP(index.php):

<div class="meio">
 <div id="menu_right">MENU-RIGHT<br />dsdsd</div>
  <div id="conteudo">TEST CONTEUDO<br />sasas</div>
   </div>

 

- Então estou com um seguinte problema, na classe .meio coloquei o height: auto; , fazendo com que .. o que você colocar dentro da div vai aumentando o height. Então coloquei a div #conteudo e #menu_right porém o height do .meio não cresce.

 

Ela so cresce se eu escrever algo nela e não colocar uma outra div dentro dela, ou seja:

 

Colocando div's: Não funciona (não cresce)

 

Colocando textos: Funciona (cresce)

 

Porque esta assim ?

 

Espero uma ajuda

Obrigado pela atenção

[Francispansa 6]

Provavelmente a div 'meio' não está acompanhando as outra duas por causa do float que tem na div menu_right e conteudo.

 

Experimente criar uma div clear e coloque abaixo de tudo, ex.:

 

.clear{
clear:both;
}


<div class="meio">
<div id="menu_right">MENU-RIGHT<br />dsdsd</div>
<div id="conteudo">TEST CONTEUDO<br />sasas</div>
<div class="clear"></div>
</div>

[André do Vale 76]

Ou, caso você produza dispensando o IE7 e inferiores, pode apenas aplicar um display: inline-block na div.meio.