2

So I have this problem distributing the 24 Divs evenly. I have a container that should have 3 columns and 8 rows. I followed the css styles here:

Fluid width with equally spaced DIVs

it works perfectly but there is a little problem at the bottom. it seems the last row is not working exactly what it supposed to be:

here's an image to describe the problem.

enter image description here

Notice that at the bottom, the divs are NOT distributed EVENLY. I wonder what's wrong because all the 7 rows is functioning correctly (distributed evenly) but the problem lies at the last row.

here's my HTLML & CSS and my Fiddle

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

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

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    width: 1023px;
}

.box {
    width: 327px;
    height: 320px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
#container:after {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.box {
    background: #ccc
}
Community
  • 1
  • 1
Kareen Lagasca
  • 909
  • 4
  • 19
  • 44

1 Answers1

4

You could do it by apply css content: ""; property to your div#container:after tag.

The text-align to #container is Justified but the last line (or row in your case) does not get stretched (or compressed) to fit in the #container and this solution use a variation of the :after pseudo-content method that will fix the issue.

JSFiddle - DEMO

CSS:

#container:after {
    content: "";
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

Check this out for more info about CSS text-align property:

Mozilla MDN CSS text-align

Anonymous
  • 10,002
  • 3
  • 23
  • 39