div sobrepondo div

[kabulozo 0]

Olá pessoal,

 

Como muitos, estou iniciando agora com webstandards e estou montando meu primeiro site desta maneira.

 

Estou querendo montar um quadro da seguinte maneira:

 

eu tentei fazer dessa maneira:

div#quadroazul {

width: 538px;

border: #3373D3 solid 2px;

border-left: #3373D3 dashed 1px;

border-right: #3373D3 dashed 1px;

background: #D9E6FC;

}

div#destaque {

float: right;

margin-top: 19px;

width: 269px;

height: 152px;

border-left: #3373D3 dashed 1px;

border-bottom: #3373D3 solid 2px;

background: #FFF;

}

div#destaqueinterna {

padding: 3px;

margin-left: 8px;

width: 253px;

height: 144px;

border-top: #96026B solid 2px;

border-left: #96026B dashed 1px;

border-right: #96026B dashed 1px;

background: #FAEEFA;

}

OBS: Os titulos estão a parte.

 

Continuando, desse modo no firefox ok, do jeito q eu quero... masss.... pra varia... no IE... fik o quadro azul abaixo do destaque.

 

Tentando acertar, por um erro de digitação, no quadro azul inseri um float left, soh q de maneira errada. Vejam:

div#quadroazul {

float: left:

width: 538px;

border: #3373D3 solid 2px;

border-left: #3373D3 dashed 1px;

border-right: #3373D3 dashed 1px;

background: #D9E6FC;

}

Notem que o float left termina com : (dois pontos) e naum ; (ponto e virgula)

 

Pronto, o IE acerto o posicionamento e no firefox continua certo também.

 

Mas, esse css não será validado dessa forma.

 

Agora a dúvida.

 

Como fazer esse quadro de uma forma valida, que funcione em todos os browsers?

 

Vlw.

[Poe 0]

Tentou colocar o float no FINAL:

 

div#quadroazul {width: 538px;border: #3373D3 solid 2px;border-left: #3373D3 dashed 1px;border-right: #3373D3 dashed 1px;background: #D9E6FC;float: left;}

E se o erro persistir a coisa é um pouco mais profunda.

 

Aliás, você não precisa desses "div" antes dos "#", basta colocar:

 

#destaqueinterna

#quadroazul

...

 

Se o erro persistir, ai eu acho que o buraco é mais embaixo, talvez seja erro de somatória de widths, muito comum, pode ter certeza! :D

 

Abraço!