Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!!!
Tenta com um max width de 200px na do meio.
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.
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;
}width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
}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();
});$(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");
}
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">