Three Divs Side by Side with Spacing in Between

Three divs side by side with spacing in between

You might be better using a flexbox to achieve what you need. Create a container for the three .box divs, and style it with the following:

display:flex;
justify-content:space-between;

Keep in mind that the width of your .box divs will need to be lowered to achieve the space you want and that you would not require the float:left; in the css.

For more info on flexboxes, click here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Three divs side by side but no auto margin between them

Make sure you're using box-sizing so that the padding is being calculated properly. You'll also likely want to utilize a media query in order to achieve your goal of their being fewer side-by-side elements on smaller screens.

https://jsfiddle.net/a6ry5m7v/

There are certainly more modern approaches (such as flex containers) but based on your original comments this seems to be the approach you were expecting

divs side by side with space between

You may need to use float:left to align two DIVs side by side

<div style="height: 160px; width: 100%; box-sizing:border-box; display:table;">
    <div class="introwrapper" style="float:left;margin-right:30px; height:100%;    width:25%;display:table-cell;background: pink;box-sizing: border-box;">First      Div</div>
    <div class="introwrapper" style="float:left;height:100%; width:25%;display:table-cell; background: blue; box-sizing: border-box;">second div</div>
    <br style="clear:left" />
</div>

How to make 3 divs side by side

try this one. position: absolute;

.container {

  border: 1px solid;

  position: relative;

  overflow: hidden;

  

}

.container div {

  height: 50px;

  width: 50px;

  background: red;

  display: inline-block;

  

}

#div1 {

 float: left;

}

#div3 {

 float: right;

}

#div2 {

  position: absolute;

  left: 0;

  right: 0;

  margin: auto;

}

<div class="container">

  <div id="div1"></div>

  <div id="div2">he</div>

  <div id="div3"></div>

</div>

css - align side by side 3 divs of different sizes

Use display: flex; on my-container and remove inline-block from child elements

.my-container {

  display: flex;

  width: 400px;

  height: 50px;

  background-color: green;

}

.left {

  width: 50px;

  height: 50px;

  background-color: red;

}

.middle {

  width: 300px;

  height: 50px;

  background-color: blue;

}

.right {

  width: 50px;

  height: 50px;

  background-color: yellow;

}

<div class="my-container">

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

  <div class="middle"></div>

  <div class="right"> </div>

</div>

---

Related Topics