[Resolvido] caixa dentro de caixa

[razs 0]

Boas, tenho esta caixa com outra mais pequena dentro dela, o problema e que nao consigo que a caixa mais pequena se cole ao topo aparecendo sempre mais abaixo, alguem consegue ver porque?

 

<div style="width:600px;height:295px;padding-top:10px;text-align:center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border:3px solid #FFFFFF;background-color:#121b28;-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;">
<div style="width:300px; float:left; margin-left:15px;">
</div></div>

 

Obrigado

[Giovani 104]

Não seria por causa do padding-top:10px na maior?

[FK. 0]

Testando seu código aqui, se eu realmente entendi, acredito que o problema é você estar aplicando 3px de borda para a div externa. Assim, parece que a div interna não quer colar, o que na verdade, existe uma borda "impedindo" isso. Como você não quer esse espaço em cima, então aplique as bordas apenas ao lado esquerdo, direito e em baixo. É um pouco estranho, talvez por causa do float: left; da div interna, não entendi muito isso. Mas retire esta instrução CSS da div externa para você ver:

 

border: 3px solid #FFFFFF;

 

E tente trocar por:

 

border-right: 3px solid #FFF;
border-left: 3px solid #FFF;
border-bottom: 3px solid #FFF;
// Alguém sabe se existe um "atalho" para isso?

 

Vai ficar um pouco estranho, mas acredito que seja esse o problema. :D

[André do Vale 76]

border-right: 3px solid #FFF;
border-left: 3px solid #FFF;
border-bottom: 3px solid #FFF;
// Alguém sabe se existe um "atalho" para isso?

 

border:3px solid #fff;border-top:none

 

border-width:0 3px 3px 3px;border-style:solid;border-color:#fff

[FK. 0]

André Campos, da hora, CSS tem tanta maneira de fazer a mesma coisa que as vezes me perco. hehe

[razs 0]

Obrigado a todos, entretanto ja refiz de outra maneira