Posicionamento
A div topo e o rodapé estão maiores do que deveriam e por isso aparece essa barra de rolagem para a lateral, mas eu não quero que isso aconteça, como mantenho esses elementos pegando a página toda mas sem ultrapassar o limite visível a ponto de criar uma barra de rolagem como tem acontecido?
Sobre as medidas, usar pixel é errado?
Estou tentando usar "em", mas é complicado e não consigo me adaptar a ponto de atingir um resultado satisfatório, porcentagem também é uma medida que achei complicada de trabalhar, eu devo treinar isso, tentar outro tipo ou voltar ao pixel?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/posicionamento.css">
<title></title>
</head>
<body>
<div class="topo">topo</div>
<div class="lateral">lateral</div>
<div class="conteudo-meio">Conteúdo-meio
<div class="dentro-conteudo-1">dentro-conteudo-1</div>
<div class="dentro-conteudo-2">dentro-conteudo-2</div>
<div class="dentro-conteudo-3">dentro-conteudo-3</div>
<div class="dentro-conteudo-4">dentro-conteudo-4</div>
<div class="dentro-conteudo-5">dentro-conteudo-5</div>
<div class="dentro-conteudo-6">dentro-conteudo-6</div>
</div>
<div class="rodape">rodape</div>
</body>
</html>.topo{
background-color: #69b634;
width: 100%;
height: 70px;
margin: 0 0 15px 0;
padding: 10px;
}
.lateral{
background-color: #00bfa5;
height: 52em;
width: 8em;
float: right;
margin-left: 15px;
margin-right: 5px;
padding: 20px;
}
.conteudo-meio{
background-color: #126a7c;
position: relative;
height: 52em;
/*width: 970px;*/
width: 52em;
padding: 20px;
margin: 10px 40px 10px 200px;
}
.dentro-conteudo-1{
background-color: #84927a;
position: absolute;
top: 10%;
right: 60%;
padding: 10px;
margin-left: 10px;
width: 200px;
height: 200px;
}
.dentro-conteudo-2{
background-color: #ef3f23;
position: absolute;
top: 10%;
right: 20%;
padding: 10px;
width: 200px;
height: 200px;
}
.dentro-conteudo-3{
background-color: #8f6190;
position: absolute;
top: 40%;
right: 20%;
padding: 10px;
width: 200px;
height: 200px;
}
.dentro-conteudo-4{
background-color: #fe2b75;
position: absolute;
top: 40%;
right: 60%;
padding: 10px;
margin-left: 10px;
width: 200px;
height: 200px;
}
.dentro-conteudo-5{
background-color: #2bfeb4;
position: absolute;
top: 70%;
right: 60%;
padding: 10px;
width: 200px;
height: 200px;
}
.dentro-conteudo-6{
background-color: #00c3ff;
position: absolute;
top: 70%;
right: 20%;
padding: 10px;
width: 200px;
height: 200px;
}
.rodape{
background-color: #fea821;
height: 70px;
width: 100%;
padding: 10px;
margin: 15px 0 0 0;
}
