[Resolvido] alinhamento FLOAT

[montano 0]

bom dia, estou tentando alinhar 3 divs, em (2 colunas e 2 linhas) vai ter duas divs a esquerda ocupando 1 linha cada, e uma a direita ocupando 2.

no IE eu alinhei com float left, e float right. mas o googlechrome nao esta alinhando ele nao decha uma do lado da outra, ele alinha uma a esquerda e outra a direita mas uma abaixo da outra.

 

*{padding:0;margin:0;}
body{
text-align:center;
}

#cabeca{
background-image: url(images/cabeca.jpg); 
clear:both;
height:150px;
width:950px;
margin: 0 auto;
}

#bt{
background-image: url(images/cabeca.jpg); 
clear:both;
height:40px;
width:950px;
margin: 0 auto;
}

#corpo{
clear:both;
height:600px;
width:970px;
margin: 0 auto;
}

#qd1{
/* 1 quadrado a esquerda */ 
background:green;
clear:both;
height:250px;
width:600px;
margin:10px;
float:left;
}

#qd2{
/* 1 quadrado a direita ocupa 2 linhas*/ 
background:black;
clear:both;
height:410px;
width:330px;
margin:10px;
float:right;
}

#qd3{
/* 2 quadrado a esquerda*/ 
background:white;
clear:both;
height:140px;
width:600px;
margin:10px;
float:left;
}

<div id="corpo">
<div id="qd1">
DIV qd1
</div>
<div id="qd2">
DIV qd2
</div>
<div id="qd3">
DIV qd3
</div>
</div>

abs

[Thiago Retondar 18]

  montano disse:

bom dia, estou tentando alinhar 3 divs, em (2 colunas e 2 linhas) vai ter duas divs a esquerda ocupando 1 linha cada, e uma a direita ocupando 2.

no IE eu alinhei com float left, e float right. mas o googlechrome nao esta alinhando ele nao decha uma do lado da outra, ele alinha uma a esquerda e outra a direita mas uma abaixo da outra.

Sim, o Google Chrome está renderizando de forma correta, pois não há sentido em deixar uma #div ao lado da outra com clear: both. Se quiser uma ao lado da outra, retira os clear: both.

 

Você sabe para que serve o clear? Vou explicar de forma resumida: a propriedade clear "limpa" o espaço esquerdo, se for aplicado o valor left, ou o lado direito, se dor aplicado o valor right, ou os dois lado, se for aplicado o valor both. Ou seja, essa propriedade não deixa nenhum elemento aos lados definidos. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[montano 0]

thiago, voce sempre me salvando. heheheh

 

valeu de novo. abraços

 

funciono direitinho