How to distribute several divs in a div evenly

Question

I have the following div before my footer and i want to have evenly distribute some more divs in it. currently i'm using manual margin percentage but I want to know is there a way to let CSS automatically distribute them with even space?

CSS

#books {margin:10px auto;}          
.bookimage {width:7%;
            padding-top:7%;
            display:inline-block;
            margin:2%;
            }

HTML

<div id="books">
     <div class="bookimage">  </div>
     <div class="bookimage"> </div>
     <div class="bookimage"> </div>
     <div class="bookimage"> </div>
     <div class="bookimage"> </div>
     <div class="bookimage"> </div>
     <div class="bookimage"> </div>
     <div class="bookimage"> </div>
</div>

http://stackoverflow.com/a/32122011/3597276 – Michael Benjamin Mar 05 '16 at 20:54 — Michael Benjamin, Mar 05 '16 at 20:54

score 5 · Accepted Answer · edited Apr 15 '16 at 15:55

5

Use this in your CSS

#books {
    margin:10px auto;
    display:flex;
    justify-content:space-between;
}

edited Apr 15 '16 at 15:55

Adam Nierzad

942
6
19

answered Mar 05 '16 at 20:47

Alexander · Answer 2 · 2016-03-05T21:04:11.910

First of all I would recommend to change your IDs to classes instead. Multiple elements with the same ID is invalid and could cause problems. If you dont need support for IE9 and below you can use flexbox to solve your problem.

HTML

<div class="books">
  <div class="book"></div>
  <div class="book"></div>
  <div class="book"></div>
  <div class="book"></div>
</div>

CSS

.books {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 10px auto;
}

How to distribute several divs in a div evenly

2 Answers2