problema com a propriedade FLOAT .
estou tentando criar um menu onde a logo fique a esquerda e o menu a direita,
o problema é que quando eu adiciono a propriedade FLOAT:LEFT para .LOGO e FLOAT:RIGHT para .menu, elas acaba, saindo de dentro da <nav class:"wrap"> ,
onde <nav class:"wrap">, fica com "height: 0; como se nao estivesse conteudo dentro da mesma, ao remover o "FLOAT", o <nav class:"wrap"> reaparece com o ;''height" relativo ao conteudo.
desculpem a confusão espero que entendam . obg
<div id="menu">
<nav class="wrap">
<div class="logo">
<a href="index.html"><img src="logo/jelogo.png" alt=""></a>
</div>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="missao.html">Missão</a></li>
<li><a href="link.html">Links</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
o problema é que quando eu adiciono a propriedade FLOAT:LEFT para .LOGO e FLOAT:RIGHT para .menu, elas acaba, saindo de dentro da <nav class:"wrap"> ,
onde <nav class:"wrap">, fica com "height: 0; como se nao estivesse conteudo dentro da mesma, ao remover o "FLOAT", o <nav class:"wrap"> reaparece com o ;''height" relativo ao conteudo.
div#menu{
background-color: #525252;
border-radius: 10px;
border-bottom: #EE82EE solid 2px;
}
.wrap{
width: 960px;
margin: auto;
}
.logo{
width: 30%;
margin: 0;
padding: 0;
position: relative;
float: left;
}
.menu{
width: 70%;
margin: 0;
padding: 0;
position: relative;
float:right;
}desculpem a confusão espero que entendam . obg
Matheus Santos
Curtidas 0
Melhor post
Gabriel
26/06/2019
.wrap::after {
content: "";
display: block;
clear: both;
}
Se atente sempre à documentação: https://developer.mozilla.org/pt-BR/docs/Web/CSS/clear
https://codepen.io/anon/pen/WqZYOe
GOSTEI 1
Mais Respostas
Julio
08/06/2019
Aconselho a estudar sobre flex-box. no seu contexto, usando flex-box, ficaria assim:
<header> <div> <img src="logo.png" alt="logotipo"> </div> <div> <nav></nav> </div>
header{
display:flex;
justify-content: space-between;
}
GOSTEI 1