Como centrar DIVs

peter alien

peter alien

Power Member
Alguém me pode dizer como é que coloco dois DIVs lado a lado.

No caso do meu código fiz isso para os DIVs "conteudo" e "fundo" ("fundo" é o background onde os botões vão acentar, e "conteudo" é o DIV onde irá aparecer o conteudo de cada opção do menu), o problema é que usei o float, e quando tento diminuir a janela do browser esses divs começam a descer, ou sejam já não ficam lado a lado.

Alguem que me dê uma solução para isso, estou a usar o IE6. Obrigadão :)

Fica aqui o código:

Código: 
<style type=text/css>
body {
background-image: url(Imagens/BGGradiente.png);
background-repeat: repeat-x;
background-position: center;
background-color: #000000;
}
#header {
width: 950px;
    height: 169px;
    background-image: url(Imagens/Header.jpg);
}
#fotos {
width: 950px;
height: 79px;
background-image: url(Imagens/Fotos.jpg);
}    
#fundo {
width: 236px;
    height: 393px;
    margin-left: 8px;
    float:left;
    background-image: url(Imagens/Fundo.jpg);
}     
#conteudo {
width: 714px;
    height: 393px;
    float:left;
    background-image: url(Imagens/Conteudo.jpg);
}     
#footer {
width: 950px;
    height: 47px;
    background-image: url(Imagens/Footer.jpg);
}     
</style>
</head>
<body>
<center>
<div id="header"></div>    
<div id="fotos"></div>    
<div id="fundo"></div>
<div id="conteudo"></div>    
<div id="footer"></div>    
</center>
</body>
</html>
 
Última edição pelo moderador:
Basicamente IE 6 para CSS sucks, mas estás a definir sempre o width o que normalmente é um dos motivos para esse problema, se queres centrar mete:
margin-left: auto;
margin-right: auto;
Depois é sempre boa politica teres uma classe container que como indica o nome contem tudo, assim mais facilmente controlas a posiçao de tudo, para por exemplo se quiseres centrar, ou seja o que for.
Outra coisa é teres atenção ao uso do float: queres mesmo todas aquelas div's com float: left? Podes ter uma só com float left e a outra não. Tenta definir sempre as posições também, pelo menos left e top relativo à div em que está.
Vê também o parametro "position", não sei o que queres fazer, mas provavelmente umas serão de posição absoluta e outras relativa... enfim basicamente dá uma olhada aqui e tenta perceber as coisas primeiro:
http://www.w3schools.com/css/
Qualquer dúvida apita, mas tenta por um rascunho de como queres as div's dispostas na página se não não sei o que queres...
 
Já consegui :):):)


Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=iso-8859-1">
<style type=text/css>
body {
background-image: url(Imagens/BGGradiente.png);
background-repeat: repeat-x;
background-position: center;
background-color: #000000;
}
#layout {
width: 950px;
            height: 688px;
            margin: 0 auto;
}
#header {
width: 950px;
            height: 169px;
            background-image: url(Imagens/Header.jpg);
}
#fotos {
width: 950px;
         height: 79px;
         background-image: url(Imagens/Fotos.jpg);
}    
#fundo {
float: left;
width: 236px;
         height: 393px;
         background-image: url(Imagens/Fundo.jpg);
}     
#conteudo {
float:left;
width: 714px;
         height: 393px;
             background-image: url(Imagens/Conteudo.jpg);
}     
#footer {
width: 950px;
         height: 47px;
            background-image: url(Imagens/Footer.jpg);
}     
</style>
</head>
<body>
<div id="layout">
<div id="header"></div>    
<div id="fotos"></div>    
<div id="fundo">
<img src="Imagens/Botao1.gif">
</div>
<div id="conteudo"></div>    
<div id="footer"></div>    
</div>
</body>
</html>
 
Última edição pelo moderador:
A melhor maneira de centrar uma div (no ecran, p.e.) é:

#container { position: absolute; left: 50%; width: 950px; margin-left: -475px; border: 0; }

Sendo que neste caso a página tem 950 de largura total.
Se for por exemplo 500, tem q ser width: 500px ; margin-left: -250px !

Cumps
 
Exacto ou isso ou margin-left: auto; margin-right: auto; ambos os modos funcionam e são validados... por isso quem ilumina não sou eu como tu dizes mas sim o W3C que não "ensina" nem valida a usar margens negativas...
 
Estranhamente nenhum dos margin funca :S tentei:
"margin: 0 auto 0 auto;"
"margin: 0 auto;"
"margin-left: auto; margin-right: auto;"

e nada. Com o left e o margin-left negativo consegui nos browsers todos menos o IE :S
Algumas sugestões?
 
Inicie sessão ou registe-se para poder participar.
Back
Topo