When I add float: right; to my code, I lose the height of my main container i.e. the
tag?

Question

When I add float: right; to my code, I lose the height of my main container i.e. the <nav> tag. How can I fix this?

Here is my code:

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  padding: 20px 40px;
  background-color: #333;
  position: relative;
}

.nav-ul {
  display: block;
  float: right;
}
  
.nav-li {
  display: inline;
  list-style: none; 
}

.nav-li .nav-links{
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  margin-left: 40px;
}

<html>
  <head>
    <title>NavBar</title>
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    
  </head>
  <body>
    <nav>
      <ul class="nav-ul">
        
        <li class="nav-li">
          <a href="#" class="nav-links">Home</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Products</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Shop</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">About Us</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Contact Us</a>
        </li>
        
      </ul>
    </nav>
  </body>
</html>

This is because float element is removed from the normal flow of the page. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/float) — Sfili_81, Jan 15 '20 at 10:03
Links to codepen must be accompanied by the code in the question too - see [mcve] — Pete, Jan 15 '20 at 10:11
duplicate: https://stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why — Pete, Jan 15 '20 at 10:11

score 2 · Accepted Answer · answered Jan 15 '20 at 10:08

See the specification:

float is designed so it doesn't affect the height of the container. This is so that, for example, you can have an image that starts in one paragraph and ends in another paragraph.

It is not a general purpose layout tool. If you want to put two elements side by side, then look to flexbox instead.

body {
 display: flex;
}

nav { background: #aaa; }

<nav>
  Nav
</nav>
<main>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
</main>

score 0 · Answer 2 · answered Jan 15 '20 at 10:05

Remove float:right from .nav-ul and add text-align:right to nav

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  padding: 20px 40px;
  background-color: #333;
  position: relative;
  text-align: right;
}

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

.nav-li .nav-links{
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  margin-left: 40px;
}

<html>
  <head>
    <title>NavBar</title>
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    
  </head>
  <body>
    <nav>
      <ul class="nav-ul">
        
        <li class="nav-li">
          <a href="#" class="nav-links">Home</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Products</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Shop</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">About Us</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Contact Us</a>
        </li>
        
      </ul>
    </nav>
  </body>
</html>

When I add float: right; to my code, I lose the height of my main container i.e. the tag?

2 Answers2

When I add float: right; to my code, I lose the height of my main container i.e. the
tag?