Publicado em 2 de set.

[Resolvido] Float e layout líquido, o DIV pula para baixo se a re

Oi pessoal,

Estou desenvolvendo um site com layout líquido (alguns também conhecem como elástico ou ajustável), nele tenho um DIV principal que chamei de #container, dentro dele tenho outro DIV chamado #topo e este último contém dois DIVs, um chamado #topo_esquerda e outro chamado #topo_direita, o primeiro flutua para a esquerda e o segundo flutua para a direita. Abaixo segue a estrutura:

<div id="container">

 <div id="topo">

 <div id="topo_esquerda">
 </div>

 <div id="topo_direita">
 </div>

 </div>

</div>

Segue também o CSS associado a essa estrutura:

#container {
 width: 99.9%;
	position:relative;
	height:148px;
}

 #topo{
 width:100%;
 height:148px;
 position:relative;
 background-color:#FFC;
 }

 #topo_esquerda
 {
 width:537px;
 height:148px;
 position:relative;
 float:left;
 border:solid 1px #06F;
 }

 #topo_direita
 {
 width:416px;
 height:148px;
 float:right;
 border:solid 1px #0C0;
 }

O problema está no seguinte, se a resolução do monitor couber os dois DIVs (#topo_esquerda e #topo_direita), eles ficam bonitinhos, um do lado esquerdo e o outro do lado direito, mas se o monitor não couber os dois DIVs ou se eu for reduzindo a janela do navegador, a DIV #topo_direita vai para baixo da DIV #topo_esquerda, mas o que eu preciso é que elas continuem uma do lado da outra e apareça a barra de rolagem horizontal.

Alguém pode me dar uma força sobre como fazer isso?

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Holt· 2 de set.

A barra de rolagem horizontal que apareceria, querias na body inteira ou somente na div topo/container?

M. Simão· 2 de set.

Oi Holt,

Eu preciso que apareça a barra de rolagem horizontal na body inteira.

Valeu!

>
A barra de rolagem horizontal que apareceria, querias na body inteira ou somente na div topo/container?

Holt· 2 de set.

Min-width no container é uma boa opção

* {

	margin: 0;
	padding: 0;
}
#container {
	min-width: 957px;
	width: 100%;
	height: 148px;
}
#topo {
	height: 148px;
	background-color: #FFC;
}
#topo_esquerda {
	width: 537px;
	height: 148px;
	float: left;
	border: solid 1px #06F;
	}
#topo_direita {
	width:416px;
	height:148px;
	float:right;
	border:solid 1px #0C0;
}

M. Simão· 3 de set.

>
Min-width no container é uma boa opção

Realmente resolveu o meu problema, você me quebrou um galho, muito obrigado, Holt!

Complemento apenas com o seguinte, para quem não souber, o IE6 não reconhece (pra variar) o min-width, então tem um hack para ele, encontrei no blog abaixo:

http://www.webstandards.blog.br/css/max-e-min-width-no-ie-6/

Um abraço!

Holt· 3 de set.

Eu acho melhor as pessoas que usam IE6 não poderem ver o site, para aprenderem a tomar vergonha na cara.

O maior problema da Web é a diferença de renderização entre os browsers, diminuria muito o tempo para fazer um layout se não existisse as pessoas que ainda usam IE6, ou ainda mais velho que isso -.-'

IE6 Só não é pior que layout em tabela, porque isso o IE6 renderiza :B

M. Simão· 3 de set.

>
Eu acho melhor as pessoas que usam IE6 não poderem ver o site, para aprenderem a tomar vergonha na cara.

IE6 Só não é pior que layout em tabela, porque isso o IE6 renderiza :B

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Falou e disse! No meu caso eu tenho que me submeter a esse martírio porque o meu cliente exigiu a compatibilidade com o IE6, pois muitos dos seus visitantes ainda usam esse infeliz navegador.

Valeu!