1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Dois elementos com width de 50% não cabem lado a lado

Olá! Não estou entendendo por que dois elementos com width de 50% não cabem lado a lado. Segue códigos abaixo:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Portfolio - João da Silva</title>
    <meta charset="UTF-8">
    <link rel="icon" href="img/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/portfolio.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600" rel="stylesheet">
</head>

<body>
    <main class="principal">
        <h1 class="titulo-principal">Portfolio</h1>
        <div class="conteudo-principal">
            <p>Veja abaixo a lista dos meus projetos mais relevantes:</p>
            <ul class="portfolio">
                <li>
                    <a href="#">
                        <figure>
                            <img src="img/bmw.png" alt="Imagem do site da BMW">
                            <figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="img/uol.png" alt="Imagem do site da UOL">
                            <figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="img/ibm.png" alt="Imagem do site da IBM">
                            <figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="img/g1.png" alt="Imagem do site do G1">
                            <figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>
        </div>
    </main>

    <img src="img/eu.jpg" alt="Foto de João da Silva" class="foto-principal">

    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.html">home</a></li>
                <li><a href="portfolio.html">portfolio</a></li>
                <li><a href="bio.html">sobre mim</a></li>
                <li><a href="blog.html">blog</a></li>
                <li><a href="contato.html">contato</a></li>
            </ul>
        </nav>
        <ul class="icones-sociais">
            <li>
                <a href="https://github.com/" class="github">GitHub</a>
            </li>
            <li>
                <a href="https://twitter.com/?lang=pt-br" class="twitter">Twitter</a>
            </li>
            <li>
                <a href="https://www.linkedin.com/portugues" class="linkedin">LinkedIn</a>
            </li>
        </ul>
    </aside>

    <footer class="rodape-pagina">
        &copy; João da Silva 2016
        <!-- <ul class="icones-sociais social-rodape">
              <li>
                  <a href="https://github.com/" class="github">GitHub</a>
              </li>
              <li>
                  <a href="https://twitter.com/?lang=pt-br" class="twitter">Twitter</a>
              </li>
              <li>
                  <a href="https://www.linkedin.com/portugues" class="linkedin">LinkedIn</a>
              </li>
          </ul> -->
    </footer>
</body>

</html>

CSS


body {
    background-color: #F2FFFC;
    font-family: "Crimson Text", "Times New Roman", serif;
    font-size: 120%;
    line-height: 1.5;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

h2 {
    font-size: 30px;
}

p {
    text-align: justify;
    margin: 20px 0;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.clearfix {
    clear: both;
}

.principal {
    /*float: left;*/
    width: 85%;
}

.principal a {
    color: #851944;
}

.conteudo-principal {
    width: 720px;
    margin: auto;
    padding: 30px 0 80px 0;
}

.titulo-principal {
    background-color: #851944;
    color: #FFF;
    text-align: center;
    padding: 25px;
    border-bottom: 10px solid #000;
    font-size: 60px;
    text-transform: uppercase;
}

.navegacao-site {
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
    width: 15%;
    box-sizing: border-box;
    /*clear: right;*/
    /*float: right;*/
    /*position: relative;*/
    position: absolute;
    right: 0;
    top: 310px;
}

.navegacao-site a {
    color: inherit;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    text-transform: lowercase;
}

.navegacao-site h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

/*.navegacao-site ul li {
    list-style-position: inside
}*/

.navegacao-site, .foto-principal {
    border-left: 10px solid #000;
    border-bottom: 10px solid #000;
}

.foto-principal {
    position: absolute;
    top: 0;
    right: 0;
}

.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

.icones-sociais li {
    display: inline-block;
}

.icones-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
}

.github {
    background-image: url(../img/github.png);
}

.twitter {
    background-image: url(../img/twitter.png);
}

.linkedin {
    background-image: url(../img/linkedin.png);
}

.social-rodape {
    margin: 10px;
}

.portfolio li {
    display: inline-block;
    border: 8px solid black;
    background-color: #FAFFFC;
    width: 45%;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}

.portfolio img {
    width: 100%;
}

Devo colocar duas figuras lado a lado. Do jeito que está funciona. Mas não estou enxergando o porque do width do seletor .portfolio li não poder ser 50%, e sim, tem que ser um pouco menor, no caso 45%.

  • Quais elementos não estão ficando um do lado do outro? rodando o seu codigo no jsbin a lista de projeto esta mostrando de dois em dois

    campelo.m   09 de dez de 2016
  • Sim, do jeito que está funciona perfeitamente. Mas para isso precisei deixar o width com 45% em .portfolio li. Se colocar 50% não funciona, é isso que quero entender, do porque não funciona com 50%.

    André Alexandre Stella   09 de dez de 2016
  • A margem a esquerda esta muito grande. dentro de .portifolio li passe margin-left: -19px;

    campelo.m   09 de dez de 2016
  • Agradeço a solução proposta, mas é justamente isso que quero evitar, usar esse números "mágicos" pra resolver essa questao. Usar width com 45% ou margin com -19px são artifícios que funcionam, mas quero entender o porquê não conseguir da forma lógica, que é colocar 50% para cada imagem em um espaço que deveriam caber duas. E uma observacao: o problema não está na margem, pois se colocar width com 50% com as margens zeradas também não funciona.

    André Alexandre Stella   09 de dez de 2016
  • Justamente, se você olhar vai ver que os box estão com um "tab/espaco" pra frente, por isso margem 0 vai ficar igual esta hoje, margem -19 voce esta fazendo recuo. O valor da div do lado de fora é de 720px quando voce faz width 50% ele vai dividir em 360px se voce ja comeu 19px da margem a esquerda e os box mede mais que 360px, logo não da pra dividir em duas mais.

    campelo.m   09 de dez de 2016
Mostrar todos os 6 comentários>
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags html html5 css css3 ou faça a sua própria pergunta.