How to make equal space between drawers on the same line using CSS

Question

I have a requirement that there are 4 fields in one line.

• drawers have a fixed width and height
• but the line width will change to fit the screen.
• the first box should be aligned with the left border of the row
• The last checkbox is right-aligned.
• Also, the space between any two cells must be equal.

Is there a clean CSS way to make this happen? Here jsfiddle code.

HTML:

<div class="row">
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
    <div class ="col">
        <div class="box"></div>
    </div>
</div>

CSS

.row {
    display: table;
    border: 1px solid green;
    width: 400px; /* it changes by screen size actually */
    padding: 5px;
}
.row:before, .row:after {
    content: "";
}
.row:after {
    clear: both;
}
.col {
    float: left;
    width: 25%;
}
.box {
    border: 1px solid #DDD;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}
.col:first-child .box {
    margin-left: 0;
}
.col:last-child .box {
    margin-right: 0;
}

Answer 1

Use text-align:justifyin the container, this way it will work no matter how many elements you have in your div (you do not need to work out% width for each element of the list

CSS updated

.row {
    text-align: justify;
    min-width: 412px;
    border: 1px solid green;
    width: 80%; /* it changes by screen size actually */
    height: 90px;
    padding: 5px;
}

.row:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.col {
    display: inline-block;
}
.box {
    border: 1px solid #DDD;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

Fiddle

Answer 2

css3 flex boxes, .

HTML

<div class="row">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

CSS

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

flex boxes @css

Answer 3

Why not use flexbox?

Demo

CSS

.flex-container {
  padding: 5px;
  margin: 0;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-between; /* this make the end divs at sides and equal space between other divs */
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

HTML

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

Read here for more details on flexbox.

Answer 4

you just need to remove the add-on attribute from the following

.row {
display: table;
border: 1px solid green;
width: 400px; /* it changes by screen size actually */
/*padding: 5px;*/
}

here is a demo.

Let me know if this was helpful, or if you have more requests.