Blocos em DIV's, dentro de uma DIV

[Dewerbe]

Boas,

Coloco a seguinte imagem para perceberem o que eu quero fazer:

Sendo que quero a div 1 centrada, e as outras 3 com as mesmas distancias entre elas e a mesma distancia entre os lados da div 1.

A div1 poderá ter o mesmo tamanho das 3... não é relevante. (ex. div2+div3+div4=250px largura e 50px altura ; a div 1 podera tambem ter 250px largura e 50px altura).

agradecia toda a ajuda possivel, pois estou a dar em doido com isto 😕 , ja procurei varias solucoes mas nda..

o que me acontece e que nenhuma das div's fica centrada...

cumps

[brunoais]

Já experimentaste usar:

display:table-cell;

para esses 3 div (depois ajustar distancias e tamanhos)?

[yoda]

#div1 {
 display: table;
 vertical-align: top;
}
#div2, #div3, #div4 {
 display: table-cell;
 width: 33.33%;
}

ou

*, *:after, *:before {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#div1 {
 display: block;
 vertical-align: top;
 font-size: 0rem;
}
#div2, #div3, #div4 {
 display: inline-block;
 width: 33.33%;
 font-size: 1.4rem;
}

Edited June 2, 2014 at 02:14 PM by yoda

[brunoais]

Para esse 2º caso, eu tb alteraria o box sizing de maneira a que ele não se "atrapalhe" quando há padding ou borders.

[yoda]

SIm, faltou isso, obrigado 🙂

[Dewerbe]

muito obrigado pessoal. problema resolvido 👍

obrigado mais uma vez 🙂