Ir para conteúdo

POWERED BY:

Arquivado

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

brshare

[Resolvido] margin top depois do clear both

Por , em Desenvolvimento frontend

Recommended Posts

brshare    0

brshare
Postado

ola amigos me deparei com uma duvida na renderizacao do meu site, estou tentando usar a propriedade clear both em uma div em conjunto com a propriedade margin-top so que a propriedade margin-top nao esta sendo renderizada de maneira como planejado em todos os browsers. testei com o internet explorer 6 e renderizou certo mas no firefox 3.5 nao renderizou o margin-top. segue o codigo:

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>E-commerce</title>
<link href="teste.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="esquerdo"></div>
<div id="direito"></div>
<div id="baixo">
</div>
</body>
</html>

 

#esquerdo{
	width: 40%;
	border: #060 2px solid;
	height: 300px;
	float:left;
}

#direito{
	width: 40%;
	height: 300px;
	border:#F00 2px solid;
	float: right;
}

#baixo{
	clear:both;
	width: 100%;
	height: 200px;
	border: #00F 2px solid;
	margin-top: 20px;
}

qual eh a forma correta de fazer isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brshare    0

brshare
Postado

Legal funcionou! so nao entendo pq tem q alinhar #baixo a esquerda tambem. Isso é uma gambiarra ou eh uma anomalia do css ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Cara, nunca tive um problema como esse, então não tenho uma solução de cabeça, ainda mais agora que estou com pressa... hehehe

 

Mas se não quiser aplicar o float> left, pode fazer assim:

 

#baixo{
	margin: 20px 0 0 0;
	display: inline-block;
	clear:both;
	width: 100%;
	height: 200px;
	border: #00F 2px solid;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

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