5

estou usando em meu site 3 colunas(sections) cada uma com 33,33% de width e com margin-left e right de 10px para as 3. Só que a última coluna está caindo para baixo. Por elas estarem com width em %, não deveriam se ajustar ao tamanho do meu container ao invés de cair?

<main>
        <article>
            <section class="bg-col col-sm-4">
                <h2>Empresa</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="more"><a href="empresa.php">Saiba Mais</a></div>
            </section>

            <section class="bg-col col-sm-4">
                <h2>Serviços</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="more"><a href="servicos.php">Saiba Mais</a></div>
            </section>

            <section class="bg-col col-sm-4">
                <h2>Contatos</h2>
                <p>Tel: (xx) xxxx-xxxx</p>
                <p>E-mail: [email protected]</p>
                <div class="more"><a href="contatos.php">Saiba Mais</a></div>
            </section>
        </article>
    </main>
3
  • 1
    Por favor inclua o HTML na pergunta. De qualquer maneira, é o comportamento esperado: 99% de largura mais as margens ultrapassam o espaço disponível.
    – bfavaretto
    10/06/2014 às 17:17
  • @bfavaretto como eu poderia resolver? o html foi incluido.
    – Lucas
    10/06/2014 às 17:28
  • @Lucas Se minha resposta atende a sua necessidade, por favor marcar como aceita 7/07/2014 às 23:11

2 Respostas 2

4

O problema é que as larguras são relativas ao container. Esse 1% que está sobrando não está sendo suficiente para acomodar os 60px das margens.

A solução mais simples (mas que não funciona no IE9 e anteriores) é usar as propriedades de colunas do CSS3:

article {
    /* 3 colunas, 10px entre elas */
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px;
       -moz-column-count: 3; 
       -moz-column-gap: 10px;
            column-count: 3; 
            column-gap: 10px;
}

http://jsfiddle.net/LguHE/

2
  • Estas propriedades funcionam com qualquer tipo de elemento, ou só article?
    – Kazzkiq
    10/06/2014 às 21:36
  • Com qualquer elemento (talvez exista a restrição que ele seja um bloco).
    – bfavaretto
    10/06/2014 às 22:16
3

Segue a solução no FIDDLE

Eu simplemente defini largura de 30% para as section, e na section do meio dei uma margin de 5% pra esquerda e para direita, somando assim: 30% + 5% + 30% + 5% + 30% = 100%.
Onde, 30% corresponde ao espaço que a section ocupa, e 5% corresponde ao espaço entre as section.

article section                  { width: 30%; float:left; }
article section:nth-child(2)     { margin: 0 5%; }

RESPONSIVIDADE:
Quando se usa porcentagem, tudo se torna relativo, portanto se você quer alinhar lateralmente 3 Divs, deve-se levar em consideração TUDO que possa aumentar suas dimensões laterais, como:
- Border (right e left)
- Padding (right e left)
- Margin (right e left)
- Width (principalmente a largura da própria div)

A partir daí, deve-se pensar da seguinte forma.
Se quero uma div que ocupe 100% da largura disponível, tendo 5% de padding tanto na direta como na esquerda, deve-se aplicar as seguintes regras CSS:

.classe-da-div{
  width: 90%;
  padding-left: 5%;
  padding-right: 5%; 
/* 
    90% + 5% padding-left + 5% de padding-right = 100% 
*/
}

RESPONSIVIDADE COM BORDAS

Se quiser aplicar responsividade em blocos usando bordas, basta aplicar a propriedade box-sizing: border-box dessa forma a largura do bloco passa a ser automaticamente a soma do conteúdo com a borda e o padding, veja o exemplo:

.classe-da-div{
box-sizing: border-box;
width: 30%; /* Dentro desses 30% já estão calculadas as bordas e os paddings abaixo */
padding: 5%;
border: 1px solid #CCC;
}
.classe-da-div:nth-child(2){
margin: 0 5%; /* Margem pra direita e pra esquerda da div do meio */
}

Seguindo esse raciocínio você pode montar um bloco com 3 divs alinhadas lateralmente, basta somar em porcentagem a largura das divs e dividir o que sobrar para as margens.

Veja esse FIDDLE que eu fiz, ira te ajudar.

9
  • Teria como demonstrar o fiddle com border?
    – Largato
    11/06/2014 às 20:22
  • Neste caso deve ser adicionada a propriedade box-sizing: border-box ... a partir dessa regra, a box passa a contar o widtho paddinge o bordercomo conteúdo total da box ... veja no FIDDLE 11/06/2014 às 23:09
  • É, aí já não fica muito estável se quiser margem menor. De qq forma, grato.
    – Largato
    12/06/2014 às 2:43
  • Não fica? Claro q fica estável! Suponhamos uma margem minúscula agora. Veja aqui jsfiddle.net/LguHE/6 Se preferir mova a divisória da janela resultado, pra ver o comportamento das DIVs 12/06/2014 às 3:09
  • Ou pode ter a margem ainda menor como nesse exemplo, menor que isso? melhor nem ter margem! 12/06/2014 às 3:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .