<!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>
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta
resposta
Duvida sobre Float: Porque as caixas 1 e 2 não ficam lado a lado?
solução!
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;