<html>
<nav class = links>
<ul class = "produtos">
<h2>generico</h2>
<li> <a href="#"> gen</a></li>
<li> <a href="#">gen</a></li>
<li> <a href="#"> gen</a></li>
</ul>
<ul class = "cursos">
<h2>gen</h2>
<li> <a href="#"> gen</a></li>
<li> <a href="#">gen</a></li>
<li> <a href="#"> gen</a></li>
</ul>
</nav>
<section class = "conteudo">
<p>algum texto para testar</p>
</section>
</html>
CSS:
.links{
width: 100%;
height: auto;
background-color: purple;
clear:both;
position: absolute;
}
nav ul li{
display: inline-block;
font-size: 20px;
border: solid black;
background-color: grey;
}
nav ul li:hover{
background-color: white;
}
.produtos{
float: left;
}
.cursos{
float: left;
}
.conteudo{
width: 70%;
position: absolute;
background-color: yellow;
clear: both;
}
eu queria deixar meu section em baixo do meu nav, mas ou ele fica em baixo do header, ou ele fica no meio do nav, usar margin é muita gambiarra pra isso? tem como resolver isso só com float? e se eu quisesse colocar um aside ao lado do section e embaixo do nav, ainda teria como resolver com float? eu acho q estou usando muita gambiarra para posicionamento da minha pagina