multiple In-line Justified. divs display incorrectly on last row

Question

I am trying to display multiple DIV's on a page using display inline-block. This is working really well except for the last row displays incorrect spacing with some browser widths. This is best seen on larger width monitors.

Does anyone know how I can resolve this?

Thanks for any help with this.

<style type="text/css">
.item {
    Margin: 0 5px; 
    margin-bottom:30px; 
    width:160px; 
    height:240px; 
    display:inline-block !important; 
}

#container {
    width: -moz-calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: calc(100% - 80px);
    text-align: justify !important; 
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin:50px;
}
</style>

<div id=container>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
    <div class="item"  style="background-color:#333" width="160" height="240"></div>
</div>

Created on for him [JSFiddle](http://jsfiddle.net/fuzzball007/VqLY7/). The `justify` tag is doing this, I'm assuming because justifying text normally doesn't stretch the last line the same way as the other rows. — Chris Heath, Jun 28 '14 at 07:04

score 2 · Answer 1 · answered Jun 28 '14 at 07:17

2

CSS :

#container {
    width: -moz-calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: calc(100% - 80px);
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    margin:50px;
}

Remove text-aligin: justify; from #container.

And if you want to align the text inside the item divs you can add this property to .item class

answered Jun 28 '14 at 07:17

J Prakash

1,323
8
13

the issue here is that the layout isn't centered horizontaly anynmore. – web-tiki Jun 28 '14 at 07:47
change property `margin: 50px;` to `margin: 50px auto;` I think it will solve your problem. – J Prakash Jun 28 '14 at 07:57
no, it will center the `#container` element but it won't center the `.item` elements inside the container : http://jsfiddle.net/webtiki/VqLY7/2/ – web-tiki Jun 28 '14 at 08:02
What I am trying to achieve is even spacing with minimal white space to the right of the row. Removing justify does not really help as it aligns everything to the left and creates a space to the write until the browser is wide enough to add another book. – user1907898 Jun 28 '14 at 08:14

web-tiki · Answer 2 · 2014-06-28T07:48:48.617

1

For a crossbrowser solution, you need to add dummy elements to mimic a last row.

DEMO

Add these elements to your HTML at the same level as the .item elements :

<div class="hidden"></div>

CSS :

.hidden{
    height:0; width: 160px;
    display:inline-block;
    margin: 0 5px 0 30px;
}

edited Jun 28 '14 at 07:48

answered Jun 28 '14 at 07:22

web-tiki

99,765
32
217
249

Thanks this is much better and it is nearly perfect. If i reduce the browser width to 2 colums or 1, the layout is not so good. For two columns, is there a way I can force the items to center with the correct margin between them? And the same for 1 column, can that be centered? – user1907898 Jun 28 '14 at 08:27
with the approcah you are using you won't be able to center the blocks in one column layout. If you are open to other approaches, you may have a look at these questions : http://stackoverflow.com/questions/23328858/items-grid-with-inner-padding-only/23875329#23875329 this one http://stackoverflow.com/questions/19527104/center-grid-of-inline-block-elements-in-div-but-last-row-is-aligned-with-left-e/23803215 or this one http://stackoverflow.com/questions/23792158/css-responsive-grid-with-equal-margins-and-fixed-size-blocks – web-tiki Jun 28 '14 at 08:41
The answer I am looking for is [link] http://stackoverflow.com/questions/19527104/center-grid-of-inline-block-elements-in-div-but-last-row-is-aligned-with-left-e/23803215 I think this will work. – user1907898 Jun 28 '14 at 10:17

multiple In-line Justified. divs display incorrectly on last row

2 Answers2