Tenho uma dúvida que me mata na hora de criar sites, fiz um exemplo rápido aqui, após realizar algumas pesquisas e nenhuma me tira essa dúvida, não sei bem se estou no caminho correto, mas fiz uma página rápida, simples, mas pra exemplificar minha dúvida vai servir. A minha dúvida é se é errado, ou indiferente definir o tamanho da minha página dessa forma, e se existe alguma forma mais eficaz pra ajustar ao tamanho da tela do computador que vai visualizar, segue aqui o HTML e CSS, gostaria de uma atenção ao CSS, se a utilização de MARGIN-TOP, ABSOLUTE, RELATIVE, TOP, LEFT, estão sendo utilizadas corretamento? Se tiverem alguma dica, ou até mesmo um livro, artigo, algo que possa me guiar nesses conceitos, agradeço!
Segue o HTML e o CSS:
.container {
width:100%;
height:100%;
}
div.topo {
margin-top:-8px;
margin-left: -8px ;
position:fixed;
width:100%;
height:150px;
background-color: #fe5f55;
z-index: 5;
}
div.topo h1{
position: relative;
top:-35px;
font-size:70px;
text-align:center;
font-family:consolas;
}
div.menu {
position: relative;
top:-70px;
}
div.menu ul{
position:relative;
width: 100%;
margin-left:-55px;
font-size:25px;
top:0px;
text-align:center;
}
div.menu li{
display: inline;
list-style: none;
border: #600 1px solid;
}
div.menu ul li a{
text-decoration:none;
font-family: consolas;
padding:30px;
color:black;
}
div.menu ul li a:hover{
color:blue;
}
div.lateral {
top:150px;
left:0px;
height:100%;
width:230px;
position: fixed;
background-color: yellow;
}
div.lateral h2{
text-align:center;
font-size:30px;
text-decoration: underline;
}
div.conteudo {
margin-top: -17px;
position: relative;
width:1119px;
height:700px;
top:142px;
left:222px;
background-color: black;
}
div.titulo {
position: relative;
width: 100%;
height: 100%;
font-size: 25px;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<title>Big News</title>
<meta chartset="utf-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="container">
<div class="topo">
<h1>Big News</h1>
<div class="menu">
<ul>
<li><a href="">Início</a></li>
<li><a href="">Notícias</a></li>
<li><a href="">Downloads</a></li>
</ul>
</div>
</div><!-- Fim do topo -->
<div class="lateral">
<h2>Updates</h2>
</div><!-- Fim da lateral -->
<div class="conteudo">
<div class="titulo">
<p> Aqui se encontra todo conteúdo da página, as laterais e o topo do site são fixos. </p>
</div><!-- Fim do titulo -->
</div><!-- Fim do conteúdo -->
</div><!-- Fim do container -->
</body>
</html>