How to distribute elements evenly inside a div?

Question

I have to place few elements evenly and fluidly inside another div as mocked below:

enter image description here

I've seen the trick using text-align:justify as given in (https://stackoverflow.com/a/6880421/2159250), But given one or two elements, its getting placed(justified) at right/left side as given below: (which is not what I'm looking for).

enter image description here

Any help would be greatly appreciated.

if you don't need to support older browser, it's worty to take a look a flexbox: start from http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes — Lorenzo Marcon, Oct 04 '14 at 10:59

Salman A · Accepted Answer · 2014-10-04T18:11:41.550

Left aligned content looks like this (one or more dots represent a whitespace):

+----------------------------------------------+
|word.word.word.word                           |
+----------------------------------------------+

(1) text-align: justify does not justify the last (or the only) line*. One simple solution is to add a very long word which can only fit on a line of its own:

+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

(2) You want whitespace before the first and after the last word. One simple solution is to add dummy words in order to produce the following result:

+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

The desired result can be achieved by adding additional markup. For example:

.row {
    text-align: justify;
}
.row:after {
    display: inline-block;
    content: "";
    width: 100%;
}
.box {
    display: inline-block;
}
.dummy {
    display: inline-block;
}
/**** FOR TESTING ****/
.row {
    margin: 1em 0;
    background: #FC0;
}
.box {
    background: #F0C;
    width: 4em;
    height: 5em;
}
.box:nth-child(even) {
    background: #0CF;
    width: 8em;
}

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

* text-align-last property could be used in the future

Thanks, it worked. Just a note: its important to have space or newline after the dummy div (it took me couple of hrs to figure that out. — Aymer, Oct 05 '14 at 07:41

score 1 · Answer 2 · answered Oct 04 '14 at 18:30

This should be what you are looking for. It requires you to wrap your row elements inside a "dummy" div, but that should be fine.

.row {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 10px;
}
.element-wrapper {
  display: table-cell;
  vertical-align: top;
}
.element {
  width: 80%;
  height: 100px;
  margin: auto;
  background: #ccc;
}

<div class="row">
  <div class="element-wrapper">
    <div class="element">Toto</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Titi</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Tata</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Tete</div>
  </div>
</div>
<div class="row">
  <div class="element-wrapper">
    <div class="element">Toto</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Titi</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Tata</div>
  </div>
</div>
<div class="row">
  <div class="element-wrapper">
    <div class="element">Toto</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Titi</div>
  </div>
</div>

himanshu · Answer 3 · 2014-10-04T11:59:58.443

0

DEMO

ul {
    margin: 0 auto;
    width:100%;
    list-style: none;
    position:relative;
    text-align: center; 
    vertical-align: middle;
}


ul li {
    width: 218px;
    height: 218px;
    display: inline-block;
    background:#ccc;
    margin: 40px;
    border: 1px solid #d9d9d9;
    box-shadow: 1px 1px 1px #f2f2f2;
    position: relative;
    padding:0px;
    overflow:hidden;

}

edited Oct 04 '14 at 11:59

answered Oct 04 '14 at 10:57

himanshu

1,732
1
11
12

1

Not all by itself it won't; can you complete your answer, and specify the styling required, on the parent element? And even then, as identified in the question, it's not necessarily perfectly distributed. – David Thomas Oct 04 '14 at 11:29

score 0 · Answer 4 · edited Oct 04 '14 at 11:40

0

Try this code

<html>
    <head>
        <title>my page</title>
        <style type="text/css">
            .new{width: 500px; height: 200px; border: 1px solid #333; text-align: center; display: table-cell; vertical-align: middle;}
            .new div{width: 100px; height: 100px; border: 1px solid #300; display: inline-block;}
        </style>
    </head>
    <body>
        <div class="new">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

edited Oct 04 '14 at 11:40

SirDerpington

11,260
4
49
55

answered Oct 04 '14 at 11:11

user3074446

124
10

Unfortunately this will not distribute the elements evenly. Margin between those elems need to be same. – Aymer Oct 04 '14 at 13:09

anni · Answer 5 · 2014-10-04T12:04:59.083

you are taking this text-align:justify; wrong. actually there is a difference between justify and display: inline;. if you look at the code of the person who's answer was accepted then you will find that he has used both the thing i.e. text-align: justify and display: inline as the properties of different element and for different purpose.

the place where he has used the text-align:justify; property of container which tell the container to have a proper spacing between its contents and he has used display:inline; as the property of all box es to order them to arrange in a line

if you will only use display:inline then it will only display them in a line without caring about proper spacing but if you define text-align:justify; then itt will going to care about proper spacing or i should say equal padding from the border of the container

look the difference between the code of this guy... actually he has added a lot of css to make it more attractive but i have deleted all the stuff just to explain you:

code without text-align:justify;:

#container {
    border: 2px dashed #444;
    height: 125px;



    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;

}

code with text-align:justify;

#container {
    border: 2px dashed #444;
    height: 125px;
    text-align: justify;


    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;

}

and with this i hope that you are now able to understand what you were not able to understand.... — anni, Oct 04 '14 at 12:06
Hey, thanks for the point, but try with two or one element. It places them into extreme right / left side, not what I expect. I mentioned the margin b/w elems and (as well margin b/w border and elem ) should be same. — Aymer, Oct 04 '14 at 13:27

How to distribute elements evenly inside a div?

5 Answers5

Linked