How do I automatically add spacing between divs without using percentage?

Question

I have a few divs aligned horizontally. How do I make the spacing between them automatic so that if I resize the screen or add another div, there will be equal spacing between divs.

Example when screen width is 600px:

Example when screen width is 330px:

Hopefully my explanation is good enough.

Thanks for any help!

You could use flexbox and the `justify-content` property. See my answer here for options and details: [Methods for Aligning Flex Items along the Main Axis](http://stackoverflow.com/a/33856609/3597276) — Michael Benjamin, Nov 29 '15 at 15:37

Nenad Vracar · Accepted Answer · 2015-11-29T15:52:34.663

4

Flexbox can do that https://jsfiddle.net/2Lzo9vfc/210/

HTML

<div class="content">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
}

.box {
    background: black;
    padding: 25px;
    color: white;
}

edited Nov 29 '15 at 15:52

answered Nov 29 '15 at 15:32

Nenad Vracar

118,580
15
151
176

Wow, thanks! I didn't realize you could do that with flex boxes, I thought you could only make the width of element auto change. I'll accept the answer unless there is an easier way. – David Callanan Nov 29 '15 at 15:35

score 3 · Answer 2 · answered Nov 29 '15 at 15:30

3

Here you can find a solution with flexbox:

.container {
    display:flex;
    justify-content:space-between;
}
.item {
    background:#000;
    height:50px;
    width:120px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

More information about using flexbox you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Nov 29 '15 at 15:30

Sebastian Brosch

42,106
15
72
87

Thanks, this is a perfect answer but already got an answer which worked. – David Callanan Nov 29 '15 at 15:41

score 2 · Answer 3 · answered Nov 29 '15 at 15:32

2

You can use flexboxes, just appy these proprieties to the container of divs:

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

answered Nov 29 '15 at 15:32

Claudio King

1,606
1
10
12

oops, I didn't see thath Marcin had already answered in the same way. – Claudio King Nov 29 '15 at 15:33

score 2 · Answer 4 · answered Nov 29 '15 at 15:35

You may use inline-block + text-align:justify; for older browser generating an extra last invisible line with :after, or flex + justify-content:space-betwween;

.ib {
text-align:justify;
  }
.ib:after {
  content:'';
  display:inline-block;
  width:99%;
  }
.flex {
  display:flex;
  justify-content:space-between;
  }
.d100 {
  width:100px;
  height:2em;
  background:blue;
  display:inline-block;
  }

<div class="ib">
  <div class="d100"></div>
  <div class="d100"></div>
  <div class="d100"></div>
  </div>
<div class="flex">
  <div class="d100"></div>
  <div class="d100"></div>
  <div class="d100"></div>
  </div>

score 1 · Answer 5 · answered Nov 29 '15 at 15:29

1

Use the flex declaration - see here: http://www.w3schools.com/cssref/css3_pr_flex.asp

answered Nov 29 '15 at 15:29

Thomas Landauer

7,857
10
47
99

This will flexibly change the width of the div, but I want the div width to stay the same, just the spacing/margin to change based on how many elements and the screen size. EDIT: I didn't fully understand what you were telling me, it makes sense now. – David Callanan Nov 29 '15 at 15:30

score 1 · Answer 6 · answered Nov 29 '15 at 15:30

1

You can use flexboxes, this solustion is for IE 10+ and latest other browsers. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Nov 29 '15 at 15:30

Marcin

61
5

score 0 · Answer 7 · answered Nov 29 '15 at 15:27

0

Option 1: Add a border thats the same color as background

Option 2: add a background colored div and set display to inline

answered Nov 29 '15 at 15:27

I need the spacing/padding to change if the screen gets resized. – David Callanan Nov 29 '15 at 15:32
Another option is do what i said with bootstrap – Nov 29 '15 at 15:32
or use the bootstrap colums – Nov 29 '15 at 15:32

How do I automatically add spacing between divs without using percentage?

7 Answers7

Linked