Problema com altura automática em layouts

[Seikigahara 0]

Olá pessoal... Estou desenvolvendo um site, e para tal tarefa, escolhi o WP pela flexibilidade. Algo que eu vejo bastante, é que muitos sites não possuem tamanhos padronizados. Quando afirmo isto, me refiro à altura. Ela parece se ajustar automaticamente de acordo com a quantidade de conteúdo. Pois bem. Tentei implementar este método de diagramação, que está me rendendo uma bela de uma dor de cabeça. Defini a altura da DIV que receberá todo o conteúdo como "auto". Funcionou bem... Até que precisei usar um "float:left;" na coluna da esquerda (obviamente). Quando fiz isso, a caixa principal não acompanhou a coluna. Muito pelo contrário, ela recuou. Então gostaria de saber se é necessário mesmo usar a propriedade "auto" ou se tem alguma outra forma de fazer isto. Afinal de contas acho aquela barra de rolagem muito feia, ainda que haja forma de personalizar ela com Jquery...

 

Ps.: Já postei este mesmo tópico lá no espaço de wordpress, mas como não recebi resposta e não consegui solução por conta própria, postei aqui pelo fato de enquadrar bem em CSS. Peço que o administrador então, se possível, delete o tópico lá na seção de wordpress. Grato desde já!

[Giovani 104]

@Seikigahara não entendi bem a sua dúvida, você quer que o conteúdo fique do tamanho da tela ou o problema são apenas os floats?

[Seikigahara 0]

Bem, neste caso, o problema estão sendo os floats que estão causando quebra no layout. O que eu quero na verdade, é que a área do conteúdo, se expanda de acordo com a quantidade de texto, pra não ser necessário o uso da barra de rolagem. Como se o texto empurrasse o rodapé para baixo para se adaptar. Entende?

[Giovani 104]

@Seikigahara não sei como está o seu layout então faça o seguinte:

 

 

HTML:

<div id="geral">


<div id="esquerda"> flutua para a esquerda </div>
<!-- /#esquerda -->


<div id="direita"> flutua para a direita </div>
<!-- /#direita -->


<div class="clear"> aqui vai quebrar os floats </div>
<!-- /.clear -->


</div>
<!-- /#geral -->

 

No arquivo css:

.clear{ clear: both; }

 

 

Isso resolve o seu problema?

[ricardo_mc 19]

Bom, tem algumas coisas que você pode tentar.

 

Na DIV Principal (que recebe todo o conteúdo), coloque display:block. Se isso não funcionar, é possível que você tenha que apelar para o position:absolute ou relative. Dessa forma, a DIV principal acompanhará a altura do layout.

 

Se você usar float:left na principal, tbm deve resolver seu problema, mas vai alinhar o site à esquerda.

[ZUCOLLI 1]

Obrigado a todos, com as dicas ficou bem fácil.

 

Coloquei o clear: both e os ULs ficarão no lugar certo.

Coloquei display: inline-block e o background acompanhou o tamanho total das ULs.

 

Valeu mesmo.

 

ZUCOLLI