Why are div "social network" leaving the div when I use float

Asked

Viewed 57 times

1

I would like to know why the div social networks leave the div "menu" whenever I use the float for images to go to the right side.

html:

    <header id = "topo">
        <div class = "menu">
            <div class = "nome-empresa">
                <img src = "Dev.png">
            </div>
            <div class = "redes-sociais">
                <ul>
                    <li>
                        <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                    </li>
                    <li>
                        <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                    </li>
                    <li>
                        <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
</body>

css: 

 #topo {
    background-color: #000000;
    margin: auto;
}

.nome-empresa {
    padding-left: 40px;
    padding-top: 5px;
    padding-right: 80%;
}

.redes-sociais {
    float:right;
}

ul li {
    list-style: none;
    display: inline-block;
}
html css

  • Take a look at this link it can help you, there contain numerous float techniques

  • https://www.richardbarros.com.br/css/css-truques-para-dominar-a-propriedade-float

2 answers

0


Apparently your problem is in defining the properties of the main box. 

    #topo {
        background-color: #000000;
        margin: auto;
    }
    .menu { 
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        align-items: center;
      }

    ul { 
        margin:0;
        }
    ul li {
        list-style: none;
        display: inline-block;
    }
<header id = "topo">
            <div class = "menu">
                <div class = "nome-empresa">
                    <img src = "Dev.png">
                </div>
                <div class = "redes-sociais">
                    <ul>
                        <li>
                            <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                        </li>
                        <li>
                            <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                        </li>
                        <li>
                            <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

0

Elements with float do not respect the height of the container where they are. In your case, you have 2 Divs inside the div.menu (container), and as each div occupies an entire row and the second is with float, the height of div.menu shall be determined by the content of the div.nome-empresa that does not have float. That’s why the second div keeps coming out of the div.menu.

You would solve this by putting overflow: hidden in div.menu, but still the div.redes-sociais would be in a row below the previous div, the .nome-empresa, see:

#topo { background-color: #000000; margin: auto; }

.nome-empresa { padding-left: 40px; padding-top: 5px; padding-right: 80%; }

.redes-sociais { float:right; }

ul li { list-style: none; display: inline-block; }

.menu {
   overflow: hidden;
}
<header id = "topo">
     <div class = "menu">
         <div class = "nome-empresa">
             <img src = "Dev.png">
         </div>
         <div class = "redes-sociais">
             <ul>
                 <li>
                     <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                 </li>
                 <li>
                     <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                 </li>
                 <li>
                     <a href = "#"><img src = "link.png" alt= "linkedin" width="30"></a>
                 </li>
             </ul>
         </div>
     </div>
 </header>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.