Como alinhar 3 divs (left, center, right)?

[Vinny Oliveira 4]

Então galera, minha duvida é a seguinte: tenho 3 sections, e quero que uma fique a esquerda, outra no meio e outra a direita do layout liquido (100%). As sections tem 310px de largura, como eu faria essa margem?

ex:

 

<section id="container" style="position:relative;width:100%;height:auto;">

 

<section id="sleft"></section>

<section id="scenter"></section>

<section id="sright"></section>

 

</section>

[jgustavo99 85]

Você pode usar a propriedade float e margin:auto do CSS. Exemplo:

<style>
#sleft{
width:310px;
height:200px; //Exemplo
backgroud:#ccc; //Exemplo
float:left; // Alinhar left
}

#scenter{
width:310px;
height:200px; //Exemplo
backgroud:#ccc; //Exemplo
margin:auto; // Alinhar center
}

#sright{
width:310px;
height:200px; //Exemplo
backgroud:#ccc; //Exemplo
float:right; // Alinhar right
}
</style>
<section id="container" style="position:relative;width:100%;height:auto;">
 
<section id="sleft"></section>
<section id="scenter"></section>
<section id="sright"></section>
 
</section>

Espero ter Ajudado!

[samoelyeshua 15]

Tá aqui um exemplo simples de como fazer

http://jsfiddle.net/samuelgoes/taS2D/

 

qualquer dúvida só comentar

[Vinny Oliveira 4]

Você pode usar a propriedade float e margin:auto do CSS. Exemplo:

<style>
#sleft{
width:310px;
height:200px; //Exemplo
backgroud:#ccc; //Exemplo
float:left; // Alinhar left
}

#scenter{
width:310px;
height:200px; //Exemplo
backgroud:#ccc; //Exemplo
margin:auto; // Alinhar center
}

#sright{
width:310px;
height:200px; //Exemplo
backgroud:#ccc; //Exemplo
float:right; // Alinhar right
}
</style>
<section id="container" style="position:relative;width:100%;height:auto;">
 
<section id="sleft"></section>
<section id="scenter"></section>
<section id="sright"></section>
 
</section>

Espero ter Ajudado!

então mano desse modo vc esta tirando o float da div central pro margin ter efeito, e a div da direita vai para baixo.

E tbm nao funciona pois qdo o site for redimensionado quero que as 3 divs vao ficando uma em baixo da outra

[samoelyeshua 15]

então mano desse modo você esta tirando o float da div central pro margin ter efeito, e a div da direita vai para baixo.

E tbm nao funciona pois qdo o site for redimensionado quero que as 3 divs vao ficando uma em baixo da outra

.container{
    width:300px;// a seu gosto
    height:400px; a seu gosto
    background:gray;
}

.container > div {
    width:130px; //Edite a seu gosto
    height:100%; // a seu gosto
    position:relative;
    float:left;
    border:1px solid red;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

[Vinny Oliveira 4]

.container{
    width:300px;// a seu gosto
    height:400px; a seu gosto
    background:gray;
}

.container > div {
    width:130px; //Edite a seu gosto
    height:100%; // a seu gosto
    position:relative;
    float:left;
    border:1px solid red;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

Tbm ñ deu certo :/

estou tentando ver sites que tem as 3 colunas pra mim tentar pegar o fonte de exemplo

Se alguem souber por favor me ajude ?

[samoelyeshua 15]

Tbm ñ deu certo :/

estou tentando ver sites que tem as 3 colunas pra mim tentar pegar o fonte de exemplo

Se alguem souber por favor me ajude ?

Dá uma olhada no teu código fonte, as vezes dá erro por mal estruturação do html

[Vinny Oliveira 4]

Dá uma olhada no teu código fonte, as vezes dá erro por mal estruturação do html

Olá samoel, obrigado por estar tentando me ajudar !

Então, eu coloquei tudo certinho ja mexo com desenvolvimento ja faz um tempo mas nunca peguei algo assim.

O codigo q vc postou uma das divs ficou em baixo, eu quero que uma fique totalmente a direita e outra a esquerda e uma no centro, mas acho q nao tem jeito :/

[numero 1]

Olá samoel, obrigado por estar tentando me ajudar !

Então, eu coloquei tudo certinho ja mexo com desenvolvimento ja faz um tempo mas nunca peguei algo assim.

O codigo q você postou uma das divs ficou em baixo, eu quero que uma fique totalmente a direita e outra a esquerda e uma no centro, mas acho q nao tem jeito :/

Veja se a width está muito grande. Coloque um tamanho bem pequeno para testar. se ficarem alinhadas está certinho, depois apenas ajuste.

 

Estava com o mesmo problema que o seu. Com o code dele consegui resolver

[samoelyeshua 15]

Olá samoel, obrigado por estar tentando me ajudar !

Então, eu coloquei tudo certinho ja mexo com desenvolvimento ja faz um tempo mas nunca peguei algo assim.

O codigo q você postou uma das divs ficou em baixo, eu quero que uma fique totalmente a direita e outra a esquerda e uma no centro, mas acho q nao tem jeito :/

Uma ficou a baixo por que você botou um width que não cabe todas alinhadas

 

muda o width do container ou diminui os das divs e veja.

[Vinny Oliveira 4]

Uma ficou a baixo por que você botou um width que não cabe todas alinhadas

 

muda o width do container ou diminui os das divs e veja.

Então eu fiz isso tb, elas ficaram lado a lado, mas como é um layout liquido eu quero que elas fiquem totalmente a direita outra no centro e outra a esquerda

[samoelyeshua 15]

Se o que você quer é que as divs não fiquem abaixo uma das outras, faz isso

http://jsfiddle.net/samuelgoes/taS2D/1/

 

se for para que elas quebrem é só fazer o que eu disse antes...

 

você fala que quer uma totalmente a direita, outra a esquerda e outra no centro,

mas é exatamente isso que eu te mostrei... tem 3 divs , uma a direita, uma no meio e outra a esquerda.

 

mas vamos fazer assim...

http://jsfiddle.net/samuelgoes/k8rrc/

 

assim, elas diminuem e tbm pulam para parte de baixo se for necessario.

se n for isso, então n sei