Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

<div> fica fora da outra

por Marco Antonio Pandolfo Colsato
| 519.4k xp | 53 posts
Desenvolvedor Backend

Olá, eu estava testando uns posicionamentos bem simples de div com css e queria saber porque as duas divs coluna1 e coluna2 nao ficam dentro da div do container, elas ficam pra fora. Queria deixar de um modo em que o container envolvesse todas as 2 divs coluna1 e coluna2 Obrigado.

https://imgur.com/a/AUvVUdG

CODIGO:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <title></title>
    <style>
        body {
            display: block;
        }
        div {
            text-align: center;
        }
        .coluna1 {
            font-weight: bold;
            font-size: 2em;
            float: left;
            background-color: green;
            width: 30%;
            height: 300px;
        }
        .coluna2 {
            font-weight: bold;
            font-size: 2em;
            float: right;
            background-color: blue;
            width: 30%;
            height: 300px;
        }
        .titulo {
            font-size: 3.3em;
            text-align: center;
        }
        .container {
            margin: 70px 70px;
        }


    </style>
</head>
<body>
    <main>
        <div class="titulo"><h1>Bem Vindo</h1></div>
        <div class="container">
            <div class="coluna1"><h1>Primeira Coluna</h1></div>    
            <div class="coluna2"><h1>Segunda coluna</h1></div>
        </div>
    </main>

</body>
</html>
1 resposta
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Marco, beleza? Esse problema acontece devidamente ao comportamento do float, onde ele irá flutuar os elementos, para resolvê-lo você pode fazer de três maneiras:

  1. Adicione também um float na div pai, ou seja, na .container.
  2. Adicione na .container um display: inline-block.
  3. Crie um clearfix e adicione essa classe na sua div pai, ou seja, na .container:
.clearfix::after, .u-clearfix::before {
    content: ""
    display: table
}

.clearfix::after {
    clear: both
}

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

De todas as três opções recomendo a terceira, através do clearfix.

Espero ter ajudado.