Как отделить двух дивов по вертикали друг от друга?

В то время как я делал div для панели навигации, я также думал о создании второго div, который представляет левую сторону веб-сайта, с классом «left».

#nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}




.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
}
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

<div class="left"></div>

Мой вопрос: как я мог бы отделить» панель навигации «div от» левого » div?

1 ответ

  1. #nav {
      height: 55px;
      background-color: green;
    }
    
    #nav ul {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
    }
    
    #nav ul li a {
      text-decoration: none;
      float: left;
      padding: 10px;
      line-height: 35px;
      font-size: 20px;
      display: inline-block;
      color: yellow;
    }
    
    #nav ul li a:hover {
      color: red;
      background-color: black;
    }
    
    
    
    
    .left {
      height: 260px;
      width: 100px;
      background-color: red;
      padding: 10px;
      border-radius: 2px;
      float: left;
    }
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <br>
    <div class="left"></div>

    Вы имеете в виду вот так, с простым <br>?

    #nav {
      height: 55px;
      background-color: green;
    }
    
    #nav ul {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
    }
    
    #nav ul li a {
      text-decoration: none;
      float: left;
      padding: 10px;
      line-height: 35px;
      font-size: 20px;
      display: inline-block;
      color: yellow;
    }
    
    #nav ul li a:hover {
      color: red;
      background-color: black;
    }
    
    .left {
      height: 260px;
      width: 100px;
      background-color: red;
      padding: 10px;
      border-radius: 2px;
      float: left;
      margin-top: 2%;
    }
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
    <br>
    <div class="left"></div>

    Или альтернативно, с margin-top?