Ir para conteúdo

POWERED BY:

Arquivado

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

Lucélio

Tamanho de Div's diferentes IE x Firefox

Por , em Desenvolvimento frontend

Recommended Posts

Lucélio    0

Lucélio
Postado

Estou tentando posicionar duas divs, para fazer duas colunas, dentro de uma que ficará centralizada na página.

Pelo que pude entender, defino o tamanho para as mesmas, e uso o float (right left) para joga-las à esquerda e direita.

 

Mas, o comportamento delas no firefox (3.0.6) e ie7 é um pouco diferente. o firefox não expande a div que centraliza a pagina (de nome pagina). Vejam que a div #pagina está com o background-color.

Pelo que eu pude entender, o ie7 interpreta que a div #conteudo está "empurrando" a div #pagina, e assim extendendo-a e colocando cores. o firefox não.

 

Para perceberem a diferença, vejam o código no ie e no firefox. Vocês perceberão o problema.

 

Alguém poderia ajudar?

 

Vai aqui o código:

<html>
<head>
<title>Layout Blog</title>
<style type="text/css">
body{
	background-color:#f3f3f3;
	margin-bottom:0px;
	margin-left:0px;
	margin-top:0px;
	margin-right:0px;
}
html, body{
	height:100%;
}

#rodape{
	width:100%;
	height:100px;

	bottom: 0; /**/ 
	background:#0096d4;
	clear: both;
}

#pagina{
	width:806px;
	height:100%;
	left:50%;
	margin-left:-403px;
	
	position:relative;
	
	background-color:#FFFFFF;
}

#conteudo{
	width:570px;
	float:left;
	margin:0;
}

#barraEsquerda{
	width:236px;
	float:right;
	background-color:#FFCCCC;
	margin:0;
}

#tituloPost{
	width:570px;
	margin-left:45px;
}

#textoPost{
	width:475x;
	
	margin-left:45px;
	margin-right:60px;
	
	text-indent:35px;
	overflow-x:hidden;
	overflow-y:hidden;
}

#hrSeparador{
	width:470px;
	color:#c1c1c1;
	size:1px;
}
</style>
</head>
<body>
	<div id="pagina">
		<div id="conteudo">
		CONTEÚDO PRINCIPAL <br /><br /><br />
			  <div id="textoPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis commodo lorem. Suspendisse massa. Sed feugiat aliquam est. Proin velit. Pellentesque lobortis, urna nec venenatis consequat, tellus lacus scelerisque velit, adipiscing fermentum ipsum mi interdum pede. Quisque dolor. Nunc suscipit tincidunt erat. Sed nec magna. Nulla nec tortor ut urna tincidunt viverra. Proin eget eros a urna venenatis euismod. Nullam blandit tempor elit. Cras purus neque, ullamcorper gravida, egestas tempor, sollicitudin ac, nisi. Pellentesque faucibus semper sapien. Aliquam nisi velit, ullamcorper in, consectetur ac, congue vitae, dui. Nunc elit risus, commodo id, vulputate vel, ultricies sit amet, ipsum. Ut vel neque. Nam tincidunt risus non lacus. Aliquam nibh leo, elementum sed, aliquam nec, lacinia vel, sapien. Quisque varius, nisl non facilisis facilisis, turpis erat porta ipsum, in eleifend urna mauris accumsan quam.

Nunc dignissim erat nec metus pharetra porta. Pellentesque mattis, velit vel interdum volutpat, purus purus dignissim nibh, eleifend venenatis est augue nec lorem. Aliquam erat volutpat. Nullam eleifend pharetra arcu. Fusce feugiat, dolor in malesuada interdum, lacus nunc aliquet ante, et tempus ipsum mauris quis ligula. Mauris tortor nunc, sagittis id, tincidunt vel, lacinia eu, lacus. Suspendisse vulputate. In sed nisl non lacus elementum tempus. Vestibulum tempus. Suspendisse molestie quam at dui. Proin mattis dictum nisi. Proin pede libero, vulputate id, sagittis eu, feugiat porta, dui. Morbi enim turpis, porttitor vitae, sodales accumsan, egestas et, sem. Suspendisse ultricies dolor ac metus. Mauris nec odio. Curabitur dui sem, elementum scelerisque, egestas ut, cursus quis, mi.

Vivamus eleifend posuere nulla. Sed non nisl. Quisque tempor rhoncus augue. Cras turpis est, iaculis vitae, cursus at, ultricies ac, eros. Nunc nunc mauris, ullamcorper nec, dignissim nec, auctor ac, magna. Donec sit amet ante at nulla scelerisque sagittis. Nullam consequat, nunc vel malesuada rutrum, dui lacus consequat metus, non ornare sem arcu at purus. Cras nunc. Etiam condimentum sollicitudin nulla. Maecenas ut urna vel est feugiat ultrices.

Donec rutrum venenatis nisl. Integer eu sapien. Nunc tempus. Etiam sagittis libero sed eros. Aenean vel ante ac dolor facilisis hendrerit. Morbi sed ipsum non mi placerat volutpat. Quisque sit amet arcu. Etiam eget lectus. Quisque neque erat, malesuada ut, sagittis vitae, ultricies eget, magna. Phasellus hendrerit. Quisque consectetur lorem at nunc. Duis a neque. Nullam quis leo sit amet velit tincidunt imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris in sapien. Nunc et nunc non mi feugiat mattis. Integer vehicula vestibulum tortor. Cras nec neque ultricies urna euismod feugiat. Nulla imperdiet diam ac mi. Curabitur justo lorem, fermentum et, vestibulum eu, lobortis nec, eros.

Integer condimentum leo a sapien. Nullam porttitor euismod nisi. Donec malesuada ultricies sapien. Donec ultrices pellentesque odio. In dui urna, ornare a, lacinia sit amet, sodales viverra, leo. Vestibulum suscipit nisi convallis enim. Cras bibendum fermentum ligula. Aliquam at felis quis quam rutrum tempor. Aenean nulla lectus, pharetra molestie, luctus non, aliquet quis, mi. Vivamus sit amet magna.			 
			</div>
		</div>
		<div id="barraEsquerda">BARRA ESQUERDA <br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque, tortor id iaculis luctus, justo justo dignissim orci, ut auctor urna quam sit amet dui. Aliquam lorem est, pretium sit amet, iaculis eu, pretium faucibus, neque. Phasellus blandit dui in magna. Vivamus ut neque. Proin est. Ut eget neque. Vivamus lacus. Nunc odio. Sed in dolor. Praesent odio. Sed elementum fringilla velit. Etiam porta viverra ante. Donec adipiscing erat non tellus. Cras ultrices, tortor a volutpat sollicitudin, velit lectus facilisis ante, a hendrerit mauris risus vitae odio. Duis sapien felis, vehicula sed, facilisis eget, rhoncus vel, tortor. Vestibulum vitae nibh. Duis porta ipsum sollicitudin neque. Vestibulum eu ante sed justo fermentum tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut velit lectus, bibendum a, fringilla at, semper in, lectus. </div>
	</div>
	<div id="rodape">RODAPÉ</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Procure declarar um DOCTYPE para o documento, e use um elemento nivel de bloco com clear both, para limpar os floats.

Tinha algumas coisas erradas e sobrando na tua marcação... veja:

<!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" lang="pt-br">
<head>
<title>Layout Blog</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body{
	background-color:#f3f3f3;
}
html, body{
	height:100%;
}

#rodape{
	width:100%;
	height:100px;
	bottom: 0; /**/
	background: #0096d4;
	clear: both;
}
#pagina{
	width:806px;
	margin: 0 auto;
	position:relative;
	background-color:#FFFFFF;
}

#barraEsquerda {
	width:206px;
	float:right;
	background-color:#FFCCCC;
}

#tituloPost {
	width: 570px;
	margin-left: 45px;
}

#textoPost {
	width: 495px;
	float: left;
	padding-left: 45px;
	text-indent: 35px;
}
#plat {
	clear: both;
}
</style>
</head>
<body>
	<div id="pagina">
		CONTEÚDO PRINCIPAL <br /><br /><br />
		<div id="textoPost">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sagittis commodo lorem. 
			Suspendisse massa. Sed feugiat aliquam est. Proin velit. Pellentesque lobortis, urna nec 
			venenatis consequat, tellus lacus scelerisque velit, adipiscing fermentum ipsum mi 
			interdum pede. Quisque dolor. Nunc suscipit tincidunt erat. Sed nec magna. Nulla nec 
			tortor ut urna tincidunt viverra. Proin eget eros a urna venenatis euismod. Nullam 
			blandit tempor elit. Cras purus neque, ullamcorper gravida, egestas tempor, sollicitudin 
			ac, nisi. Pellentesque faucibus semper sapien. Aliquam nisi velit, ullamcorper in, 
			consectetur ac, congue vitae, dui. Nunc elit risus, commodo id, vulputate vel, 
			ultricies sit amet, ipsum. Ut vel neque. Nam tincidunt risus non lacus. Aliquam nibh 
			leo, elementum sed, aliquam nec, lacinia vel, sapien. Quisque varius, nisl non facilisis 
			facilisis, turpis erat porta ipsum, in eleifend urna mauris accumsan quam.</p>

			<p>Nunc dignissim erat nec metus pharetra porta. Pellentesque mattis, velit vel interdum 
			volutpat, purus purus dignissim nibh, eleifend venenatis est augue nec lorem. Aliquam 
			erat volutpat. Nullam eleifend pharetra arcu. Fusce feugiat, dolor in malesuada interdum, 
			lacus nunc aliquet ante, et tempus ipsum mauris quis ligula. Mauris tortor nunc, sagittis 
			id, tincidunt vel, lacinia eu, lacus. Suspendisse vulputate. In sed nisl non lacus elementum 
			tempus. Vestibulum tempus. Suspendisse molestie quam at dui. Proin mattis dictum nisi. Proin 
			pede libero, vulputate id, sagittis eu, feugiat porta, dui. Morbi enim turpis, porttitor 
			vitae, sodales accumsan, egestas et, sem. Suspendisse ultricies dolor ac metus. Mauris nec 
			odio. Curabitur dui sem, elementum scelerisque, egestas ut, cursus quis, mi.</p>

			<p>Vivamus eleifend posuere nulla. Sed non nisl. Quisque tempor rhoncus augue. Cras
			 turpis est, iaculis vitae, cursus at, ultricies ac, eros. Nunc nunc mauris, ullamcorper 
			nec, dignissim nec, auctor ac, magna. Donec sit amet ante at nulla scelerisque sagittis. 
			Nullam consequat, nunc vel malesuada rutrum, dui lacus consequat metus, non ornare sem
			 arcu at purus. Cras nunc. Etiam condimentum sollicitudin nulla. Maecenas ut urna vel
			 est feugiat ultrices.</p>

			<p>Donec rutrum venenatis nisl. Integer eu sapien. Nunc tempus. Etiam sagittis libero 
			sed eros. Aenean vel ante ac dolor facilisis hendrerit. Morbi sed ipsum non mi placerat 
			volutpat. Quisque sit amet arcu. Etiam eget lectus. Quisque neque erat, malesuada ut,
			 sagittis vitae, ultricies eget, magna. Phasellus hendrerit. Quisque consectetur lorem 
			at nunc. Duis a neque. Nullam quis leo sit amet velit tincidunt imperdiet. Vestibulum 
			ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris in
			 sapien. Nunc et nunc non mi feugiat mattis. Integer vehicula vestibulum tortor. Cras 
			nec neque ultricies urna euismod feugiat. Nulla imperdiet diam ac mi. Curabitur justo 
			lorem, fermentum et, vestibulum eu, lobortis nec, eros.</p>

			<p>Integer condimentum leo a sapien. Nullam porttitor euismod nisi. Donec malesuada 
			ultricies sapien. Donec ultrices pellentesque odio. In dui urna, ornare a, lacinia sit
			 amet, sodales viverra, leo. Vestibulum suscipit nisi convallis enim. Cras bibendum
			 fermentum ligula. Aliquam at felis quis quam rutrum tempor. Aenean nulla lectus,
			 pharetra molestie, luctus non, aliquet quis, mi. Vivamus sit amet magna.</p>	
		</div>


		<div id="barraEsquerda">BARRA ESQUERDA <br /><br /><br />
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque, 
			tortor id iaculis luctus, justo justo dignissim orci, ut auctor urna quam sit amet dui. 
			Aliquam lorem est, pretium sit amet, iaculis eu, pretium faucibus, neque. Phasellus 
			blandit dui in magna. Vivamus ut neque. Proin est. Ut eget neque. Vivamus lacus. Nunc
			 odio. Sed in dolor. Praesent odio. Sed elementum fringilla velit. Etiam porta viverra 
			ante. Donec adipiscing erat non tellus. Cras ultrices, tortor a volutpat sollicitudin, 
			velit lectus facilisis ante, a hendrerit mauris risus vitae odio. Duis sapien felis,
			 vehicula sed, facilisis eget, rhoncus vel, tortor. Vestibulum vitae nibh. Duis porta
			 ipsum sollicitudin neque. Vestibulum eu ante sed justo fermentum tincidunt. Cum sociis
			 natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut velit
			 lectus, bibendum a, fringilla at, semper in, lectus. </p>


		</div>
		<div id="plat"></div>
		</div>

	<div id="rodape">RODAPÉ</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucélio    0

Lucélio
Postado

Opa. entendi. Valeu ae. Fiz uma limpa aqui no código mesmo.

 

Agora surgiu outro problema. O rodapé ficar fixo lah no final, mesmo quando tenha pouco texto.

 

Valeu ae;

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Veja:

http://imasters.com.br/artigo/9065/css...aixo_da_janela/

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