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

Duvida sobre Float: Porque as caixas 1 e 2 não ficam lado a lado?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web

por Carlos Eduardo
| 43.5k xp | 2 posts
<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            940px;
        }
        main{
            border: 2px solid black;
            float: left;
            width: 85%;
            text-align: center;
        }
        aside{
            border: 2px solid black;
            float: right;
            text-align: center;
            width: 15%;
        }        
    </style>
</head>
    <boby>
        <main>
                <p>1</p>
        </main>

        <aside>
                <p>2</p>    
        </aside>
    </boby>  
</html>
1 resposta
solução!
por Wagner Anghinoni Nardin
| 95.1k xp | 30 posts
Administrador

Olá Carlos.

Você adicionou uma borda em cada box com uma espessura de 2px, então cada elemento esta com 2px a mais em sua largura, fazendo com que os elementos fiquem 1 abaixo do outro.

Para resolver este problema, você precisa adicionar o parâmetro ( box-sizing ), nos elementos acima, sendo que:

  • box-sizing: border-box; ( faz com que a largura dos elementos seja calculada juntamente com a largura da borda. )

  • box-sizing: content-box; ( faz com que a largura dos elementos seja calculada somente pelo seu conteúdo, sem somar a largura da borda. Por isso seus elementos ficaram um abaixo do outro. )

Então sua solução é adicionar na CSS dos dois elementos ( main ) e ( aside ), a linha.

box-sizing:border-box;