Set Space Between Divs

Set space between divs

Float them both the same way and add the margin of 40px. If you have 2 elements floating opposite ways you will have much less control and the containing element will determine how far apart they are.

#left{
    float: left;
    margin-right: 40px;
}
#right{
   float: left;
}

How to add space between elements so they fill their container div?

You can do this with Flexbox and justify-content: space-between.

.content {  display: flex;  justify-content: space-between;  max-width: 400px;  margin: 0 auto;  background: #A0C5E8;  padding: 10px 0;}
span {  width: 50px;  height: 50px;  background: black;}

<div class="content">  <span></span>  <span></span>  <span></span>  <span></span></div>

Adding space between two divs

from your snippet it seems you are using bootstrap, if this is the case then you can add space between two horizontal divs in bootstrap as follow:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

where: col-ms-offset-{value}. add space (as specified) to the left of the div. and you should remember that the size of all divs including offsets, must sum to 12 in bootstrap grid system as the above example.

add a white space between divs

To make perfect center alignment between inline divs, you can use text-align: center on display: inline-block divs.

div.container {  text-align: center;}
div.icon {  width: 30px;  height: 30px;    display: inline-block;  margin: 10px;    background-color: #eee;  border-radius: 100%;}

<div class="container">  <div class="icon youtube"></div>  <div class="icon facebook"></div>  <div class="icon gmail"></div>  <div class="icon site4"></div>  <div class="icon site5"></div>  <div class="icon site4"></div></div>

Add space between two divs

Add justify-content: space-between; to your flex container (.site-navigation) to move the two child elements to the far left and right. And erase margin: auto; for the two flex items! All other offsets are due to margins (also default margins top and bottom), so you might want to reset these to 0.

.site-header-navbar {
  display: inline-block;
}

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

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li .sale {
  color: #a62120;
}

.site-header-right {
  display: inline-block;
}

.small-container {
  display: inline-block;
}

.search-btn {
  display: inline-block;
  margin-right: 20px;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  color: #555;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 1px;
  font-weight: 500;
}

.site-header-right a {
  display: inline-block;
  margin-right: 20px;
}

.site-navigation {
  display: flex;
  justify-content: space-between;
}

<div class="site-header-masthead">
  <div class="container">
    <div class="row">
      <div class="col-12 navbar">
        <div class="menu-hamburger"></div>
        <div class="toast-logo">
          <a href="index.html"><img src="images/logo.jpeg" width="110px"></a>
        </div>
        <div class="site-navigation">
          <nav class="site-header-navbar">
            <ul class="site-nav">
              <li><a href="https://us.toa.st/collections/women">Women</a></li>
              <li><a href="https://us.toa.st/collections/men">Men</a></li>
              <li><a href="https://us.toa.st/collections/house-home">House&Home</a></li>
              <li><a href="https://us.toa.st/collections/sale" class="sale">Sale</a></li>
              <li><a href="https://us.toa.st/pages/events">Events</a></li>
              <li><a href="https://us.toa.st/blogs/magazine">Magazine</a></li>
              <li><a href="https://us.toa.st/pages/about-us">Our Approach</a></li>
            </ul>
          </nav>
          <div class="site-header-right">
            <div class="small-container">
              <button class="search-btn">Search</button>
              <a href="#" class="site-header-wishlist">
                <span>Saved</span>
                <span>(0)</span>
              </a>
              <a href="#" class="site-header-account">Account</a>
              <a href="#" class="site-header-cart">
                <span>Bag</span>
                <span>(0)</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How to make space between elements inside div container

You can use flex with the column-gap property.

Also, setting justify-content: space-between will ensure an even space between elements if the width of the parent container increases.

.container {  display: flex;  column-gap: 20px;  justify-content: space-between;}
.element {  background: yellow;}

<div class="container">  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div>  <div class="element">my element</div></div>

How to add space between DIVs?

put in your css

#access {
  margin-bottom: 5px; /* or whatever */
}

keep space between div's

This was based on your original screenshot images of your code: basically you should use display:inline-block instead of position:absolute to prevent your bullet from overlapping your text, and then use a margin-left on the bullet so that it always has enough space between it and the text.

.list-block ul {  padding: 0;  margin: 0;}
.list-block li {  list-style: none;}
.statusdiv {  white-space: nowrap;}.statusbeschreibung {  margin-left: 40%;  display: inline-block;  vertical-align: middle;}.statuskreis {  width: 25px;  height: 25px;  margin-left: 10px;  border: 1px solid black;  text-align: center;  border-radius: 12.5px;  display: inline-block;  vertical-align: middle;}.status-on {  background-color: green;}.status-off {  background-color: red;}

<div class="list-block">  <ul>    <li>      <div class="statusdiv">        <p class="statusbeschreibung">Motorstatus</p>        <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div>      </div>    </li>    <li>      <div class="statusdiv">        <p class="statusbeschreibung">Motorstatus</p>        <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-on"></div>      </div>    </li>  </ul></div>

---

Related Topics