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

Weverton N · Agosto 4, 2008

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!!!

yetiH · Agosto 4, 2008

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">
	<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 · Agosto 4, 2008

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

Weverton N · Agosto 5, 2008

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 · Novembro 6, 2012

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");
}

Entrar

Arquivado

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

Recommended Posts

Weverton N 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

yetiH 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Weverton N 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mirai Densetsu 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

php + mysql - where do select em campo varchar com dados numéricos com zeros a direita

tratar hora no php

Navbar no Nextjs

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante