[shaun236]

Todas oi,

Sou completamente novo para web design e estou aprendendo coisas a partir do zero com alguns tutoriais online / screencasts. Preciso de pouca ajuda de vocês.

Tenho quatro div na minha marcação. Um deles é um "wrapper" div divs, enquanto outras três são para mostrar alguma imagem e conteúdos. Tenho centralizou o "wrapper" div. Todos os três div dentro tem igual largura e também tem igual margem esquerda e direita. A página parece muito bem do jeito que eu quero olhar para ele, mas quando eu começar a ampliar após um certo ponto as imagens começam a se sobrepor.

Além disso, quando eu aumentar ou reduzir o máximo de largura para "wrapper" div os outros divs dentro dela não estão alinhadas de forma igual. Eu tenho usado% para largura e margem e eu acreditava que deveria cuidar dela. O que estou fazendo errado ... por favor conselho?

Preciso de ajuda com o seguinte:

1.Quando eu zoom-in porquê imagens sobrepostas começar?
2.Quando eu repor o "wrapper" max-width porquê não outras divs manter a sua posição?

Por favor, conselhos como posso resolvê-los? Tenho também a minha marcação arquivo anexado.

Thanks in advance!

Código HTML:


Layout Elástico





Esta é DIV1







Esta é div2







Esta é Div3









Regras CSS

Código:


body (
margin: 0;
padding: 0;
)

# wrapper (
margin: 0 auto;
max-width: 60em;
border: 1px dotted azul;
height: 20em;
)

# DIV1 **
float: left;
largura: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# div2 **
float: right;
largura: 30,1%;
margin: 0 1,6% 0 1,6%;
)

# Div3 **
float: left;
largura: 30,1%;
margin: 0 1,6% 0 1,6%;
)



Attached Files ElasticLayout.zip (4.7 KB)