AlienHunter 67 AlienHunter 67 - 2 months ago 11
CSS Question

How to separate two divs vertically from each other?

While I was making a div for the navigation bar, I also thought of making a second div that represents the left side of the website, with the class "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>





My question is: how could I separate the "navigation bar" div from the "left" div?

Answer

#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>

Do you mean like this, with a simple <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>

Or alternatively, with margin-top?

Comments