Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

vonzuben

[Resolvido] Como fazer isso com a div ?

Por , em Desenvolvimento frontend

Recommended Posts

vonzuben    12

vonzuben
Postado

Tenho 3 colunas, sendo da esquerda com 160 px, centro está em % e direita tb com 160px, onde quando se diminui o navegador a coluna da direita vai parar embaixo da coluna da esquerda.

Gostaria quando eu diminuir o navegador ficasse a coluna 1 e 2 no local e só diminuir o centro com se tivesse fazendo em table no meio com 100%

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é um efeito bacaninha, mas sugiro que você tome cuidado.. fiz uso de umas propriedades perigosas :lol:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
<head> 
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#tudo {
	width: 100%;
	min-width: 800px;
	position: relative;
}
#coluna1 {
	width: 160px;
	height: 300px;
	background: #ff0;
	position: absolute;
	left: 0;
	top: 0;
}
#coluna2 {
	width: 160px;
	height: 300px;
	background: #ff0;
	position: absolute;
	right: 0;
	top: 0;
}
#miolo {
	background: #f0f;
	padding: 0 160px 0 160px; /* padding left e right da mesma largura das colunas */
	min-width: 480px;
}
</style> 
</head>
<body> 
<div id="tudo">
	<div id="coluna1">
		<h1>Coluna Esquerda</h1>
	</div><!-- /coluna1 -->
	<div id="miolo">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sollicitudin vehicula odio varius suscipit. 
		In tempus interdum accumsan. Curabitur non nisl risus. Sed sit amet nisi et mauris pretium ornare ac quis nulla. 
		Nunc varius egestas odio, ut ultrices mauris porttitor ac. Mauris risus dui, pretium vitae ornare ut, elementum a risus.
		Ut porttitor varius est eu semper. Sed hendrerit dapibus adipiscing. Suspendisse ullamcorper auctor tellus, id mollis 
		sapien semper in. Pellentesque tristique metus eget nibh luctus suscipit. Vivamus at auctor elit.</p>

		<p>Sed imperdiet molestie mauris, nec suscipit mi lacinia non. In ac mattis justo. Quisque dapibus, ligula id
		fermentum vehicula, nisl augue consequat dolor, a luctus augue libero elementum ligula. Aliquam bibendum laoreet
		quam nec semper. Sed faucibus massa sodales sapien vulputate non consectetur felis euismod. In justo dolor, semper 
		laoreet accumsan ac, hendrerit eu leo. Phasellus rutrum sagittis accumsan. Sed ut tincidunt mi. Vestibulum ac enim 
		ac sem malesuada luctus ac in urna. Proin tristique nulla facilisis sem luctus vitae interdum lacus adipiscing.
		Aenean eros magna, semper non auctor sagittis, vulputate ut risus. Curabitur facilisis gravida nunc non elementum. 
		Nam lacinia ornare felis eu faucibus. In at nisl risus. Morbi vel pellentesque turpis. Vivamus venenatis felis id 
		nisl vehicula sed fermentum odio tristique. Suspendisse euismod quam sit amet neque tincidunt pellentesque.</p>
	</div><!-- /miolo -->
	<div id="coluna2">
		<h1>Coluna Direita</h1>
	</div><!-- /coluna2 -->
</div><!-- /tudo -->
</body> 
</html>
Teste ai, só deixei um min-width, para não ficar ridículo de mais o espaço interno.

Compartilhar este post

Link para o post
Compartilhar em outros sites

vonzuben    12

vonzuben
Postado

Thiago nota 10

isso mesmo que estava procurando

 

funciona em todo browser sem problema ?

 

legal , não tem nenhuma gambiarra bem feito

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Funciona perfeitamente em todos os browser, menos no Internet Explorer 6. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Mas o que não funciona nesse caso, foi uma opção minha de colocar o min-width no body. Se quiser utilizar ele, basta dar uma pesquisada no Google:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.google.com/search?client=safari...-8&oe=UTF-8

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito