How to justify 4 divs in one row

Question

I have HTML/CSS layout problem:

I have 4 divs with the same width and height. I want to "justify them" so thay should be place from one side to the other with the same spaces between them. In other word: suppose the A, B, C, D are divs and "|" means start/end of row. So I want receive following effect of 3 divs in one row:

|A    B    C    D|

How to do it. I was able to do it with 3 divs, but how to do it with 4 divs?

is the row wide enough ? if you could do it with 3 and it's not working with 4 then that suggests not. don't make total width 25% , unless you're using border-box, as they will drop down — Billy, Dec 10 '14 at 16:09

score 8 · Accepted Answer · answered Dec 10 '14 at 16:14

8

For full browser support, you can use the below:

#container {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    width:100%;
}
#container>div {
    width: 100px;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background:red;
}
span {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div> <span></span>
</div>

answered Dec 10 '14 at 16:14

SW4

69,876
20
132
137

This is best - it works on safari 7:). – P.K. Dec 16 '14 at 14:25
Only Internet Explorer supports the text-justify attribute – Zhi Zheng Dec 18 '19 at 12:37

score 6 · Answer 2 · answered Dec 10 '14 at 16:15

6

Using flexible boxes:

#wrapper {
  display: flex;
  justify-content: space-between;
}

#wrapper {
  display: flex;
  justify-content: space-between;
}

<div id="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

answered Dec 10 '14 at 16:15

Oriol

274,082
63
437
513

Please do jsFiddle for it. – P.K. Dec 10 '14 at 16:17
2

See the code snippet. – Oriol Dec 10 '14 at 16:18
1

@P.K. why? The snippet shows exactly what a fiddle would – Rhumborl Dec 10 '14 at 16:18
1

Click "Show code snippet" – This company is turning evil. Dec 10 '14 at 16:18
This one is not working on Safari 7:( – P.K. Dec 16 '14 at 14:24
It works on Safari with code: display: flex; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; justify-content: space-between; – P.K. Dec 16 '14 at 16:11

score 2 · Answer 3 · edited Dec 10 '14 at 16:24

Live example is here: http://jsfiddle.net/gLxr3cqk/1/

#container {
  text-align: justify;
}
#container > div {
  width: 100px; /* Declare your value. Can be in relative units. */
  height: 100px;
  display: inline-block;
  vertical-align: top;
  border: 1px black solid;

  /* IE fix. */
  *display: inline;
  zoom: 1;
}
#container:after {
  content: "";
  width: 100%;
  display: inline-block;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

How to justify 4 divs in one row

3 Answers3