Publicado em 4 de ago.

[Resolvido] 3 Divs, a do centro com tamanho fixo e as laterais fl

#desenvolvimento-frontend

Galera,

Tenho tres divs, uma do lado da outra.

A do centro, quero que fique com 200px, e centralizada na página.

Como fazer para que as da lateral fiquem com o tamanho que sobrar, e mantendo a do meio centralizada?

Vlw pela ajuda!!!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

yetiH· 4 de ago.

Olá, acredito que só fazendo a div do meio elástica também.

Não me veio solução de outro jeito, a não ser que ficar redimensionando com javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
	<head>
	<style type="text/css">
 body {
 margin: 0px;
 padding: 0px;
 text-align: center;
 }
 #d1, #d2, #d3 {
 position: relative;
 margin: auto;
 height: 200px;
 float: left;
 }
 #d1 {
 width: 40%;
 background-color: #120394;
 }
 #d2 {
 width: 20%;
 background-color: #120349;
 }
 #d3 {
 width: 40%;
 background-color: #802999;
 }
	</style>
	</head>
	<body>
	<div id="d1"></div>
	<div id="d2"></div>
	<div id="d3"></div>
	</body>
</html>Flw

William Bruno· 4 de ago.

Tenta com um max width de 200px na do meio.

Weverton N· 5 de ago.

Vish galera.. isso não resolveu não.[

Pq eu preciso que a div do meio tenha exatamente o que preciso. Pq nele tem o conteudo de uma busca, que tem que casar com o background da página, que está em posição centralizada á pagina.

Abs.

Mirai Densetsu· 6 de nov.

Consegui resolver isso usando uma solução em jQuery, para criar uma barra superior. Ela é do jeito que você precisa, com duas barras laterais de tamanho flexível e uma área central, de tamanho fixo.

Ela é desse jeito:

O CSS:

.barra {
width: 100%;
height: 24px;
position: relative;
}

.barra .esq {

display: inline;
float: left;
}

.barra .meio { / div de tamanho fixo a ser centralizada /

width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
}

.barra .dir {

float:right;
display: inline;
}

O HTML:

<div class="barra">
 <div class="esq"> </div>
 <div class="dir"> </div>
 <div class="meio"> </div>
</div>

E a cereja do bolo (o jQuery):

// Redimensiona quando a página abre

$(document).ready(function() {
 alterarTamanho();
});

// Redimensiona quando a página é redimensionada, ou seja, quando você muda o tamanho da janela do navegador

$(document).resize(function() {
 alterarTamanho();
});

function alterarTamanho() {
var tam_total = document.width;
var tam_meio = $(".barra .meio").width();
var tam_lados = (tam_total - tam_meio)/2 > 0 ? (tam_total - tam_meio)/2 : 0;
$(".barra .dir").css("width", tam_lados+"px");
$(".barra .esq").css("width", tam_lados+"px");
}