[Resolvido] Alinhamento de DIV's e redimensionamento de tela

[FellipeLeao 0]

Pessoal é o seguinte, estou com um problema e não consigo resolver de jeito nenhum, já revirei o google e não acho nada relacionado.

 

Tenho 3 div's alinhadas horizontalmente de um maneira que elas ocupam 100% da tela.

Para calcular o tamanho de cada div faço alguns cálculos em javascript baseado na resolução de tela do usuário.

 

Se o usuário abre a página com o browser maximizado a visualização do site ocorre normalmente. As 3 div's se mantém alinhadas horizontalmente ocupando 100% da tela.

 

O problema ocorre se o usuário redimensionar o browser, eu queria que o site continuasse alinhado horizontalmente e apenas aparecesse um scroll para rodar na horizontal, no entanto o que ocorre é que como o espaço disponível diminui as divs começam a ir uma embaixo da outra.

 

 

 

Eu consegui resolver o problema adicionando uma posição absoluta para as divs e dando um margin-left, no entanto essa resolução não é muito viável pois perco a possibilidade de aplicar alguns efeitos. Agradeço se alguém puder me ajudar.

 

Simplifiquei os códigos para o melhor entendimento!:)

 

HTML:

<div id="main">
  	<!-- 14.54% -->
<div id="menu"><img src="menu_base.png" class="tamanho"/></div>

   	<!-- 28.22% -->
   	<div id="conteudo"><img src="conteudo.png" class="tamanho"/></div>

   	<!-- 57.24% -->
       <div id="imagem"><img src="imagem.png" class="tamanho"/></div>

</div>

 

CSS:

* {
padding: 0;
margin: 0;	
}

#main {
max-height: 950px;
}

#menu {
float: left;	
}

#conteudo {
float: left;
}

#imagem {
float: left;
}

.tamanho {
width: 100%;
}

 

E o javascript também que mostra como faço os cálculos dos tamanhos das divs.

JAVASCRIPT:

 

function definirTamanhos(){
	x = screen.width; // largura

	x = x - 20;

	document.getElementById("main").style.width = x;

	document.getElementById("menu").style.width = Math.floor((x*14.54)/100)+"px";

	document.getElementById("conteudo").style.width = Math.floor((x*28.22)/100)+"px";

	document.getElementById("imagem").style.width = Math.floor((x*57.54)/100)+"px";

}

[angelorubin 142]

Bom dia,

 

Pode ser com porcentagem?

 

Ficaria assim:

 

CSS

<style type="text/css">
* {
       padding: 0;
       margin: 0;      
}

#main {
	border:1px solid #F00;
	overflow:hidden;
	margin:1px;
}

#menu {
	float:left; 
	width:32%;
	height:200px;
	border:1px solid #F00; 
	margin:1px;
}

#conteudo {
	float:left;
	width:32%;
	height:200px;
	border:1px solid #F00;
	margin:1px;
}

#imagem {
	float:left;
	width:32%;
	height:200px;
	border:1px solid #F00;
	margin:1px;
}

.tamanho {
       width: 100%;
}
</style>

 

 

XHTML

<div id="main">
       <!-- 14.54% -->
       <div id="menu"><img src="menu_base.png" class="tamanho"/></div>

       <!-- 28.22% -->
       <div id="conteudo"><img src="conteudo.png" class="tamanho"/></div>

       <!-- 57.24% -->
       <div id="imagem"><img src="imagem.png" class="tamanho"/></div>

</div>

[FellipeLeao 0]

Obrigado pela resposta angelorubin, mas no meu caso o width não poderia ser 32% pq ele está definido dinamicamente no javascript, mas eu consegui resolver o meu problema de maneira simples. Coloquei um min-width do tamanho da tela do usuário e isso resolve o problema =/