Publicado em 30 de mar.

Problema com Faux Columns

Bom pessoal, há alguns dias estou com um problema no meu layout. É o seguinte, tenho um layout com header width 100% e footer width 100% entre eles duas colunas com width fixo de 920px. Algo mais ou menos assim:

<div id="tudo">
 <div id="conteudo">
	<div id="header"></div>
 <div id="background_colunas">
 <div id="coluna_esquerda"></div>
 <div id="coluna_direita"></div>
 </div>
 </div>
 <div id="footer"></div>
</div>

Tudo certo, footer posicionado no fim da página sempre indepedente da altura da página, porém o background da div background_colunas não se extende até o fim da página, já tentei definir min-height:100%; height:100%; uma maneira que encontrei foi definir height:xxxpx; porém imagino que isso estrague o layout em resoluções menores. Bom, resumindo a idéia é que o background se extenda até o fim da página independente da altura das colunas. Aguardo uma luz ai, abração!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 30 de mar.

As colunas estão flutuadas certo ?

o float, retira o elemento do fluxo do documento, joga para um dos lados declarados, esvaziando o container.

Oque você precisa, para fazer que o container, tenha a mesma altura dos elementos que contém, limpar a flutuação.

<div id="background_colunas">
 <div id="coluna_esquerda"></div>
 <div id="coluna_direita"></div>
<div style="clear: both"></div>
 </div>:lol:

brcontainer· 30 de mar.

Leia o seguinte link:

http://forum.imasters.com.br/index.php?showtopic=261803

Abraços

Édipo Costa Rebouças· 30 de mar.

outra solução é colocar overflow: auto em #background_colunas

brcontainer· 30 de mar.

outra solução é colocar overflow: auto em #background_colunas

Não é bem tecnicamente uma solução, é mais uma maneira diferente de se fazer determinada coisa, pois irá gerar um SCROLL na DIV, ao inves do conteudo aumentar a pagina.