White space after centering inline-block elements

Question

.calloutWrapper 
{
background: green;
height: 50%;

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

.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }


.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}

http://jsfiddle.net/yux07nom/

There is white space after the "callouts" seen with the blue backgrounds. This extends beyond the green background of "calloutWrapper" I believe its caused by the .stretch applied to the span.

Answer 1

Inline-block elements will preserve one space in the HTML. Two choices:

1. Have no space between those inline-block elements in the HTML.
2. Float:left those inline-block elements

Answer 2

First off you close out the body twice which doesn't cause your problem but should be resolved

</body>
    <script>
    </script>
</body>

Then the white space is caused by your .stretch span display: inline-block; is the culprit

Remove that and your good to go. A bit more info about what you're trying to achieve with that span could help provide a better answer.

Answer 3

If you are trying to achieve responsive boxes you could use a css responsive grid template like bootstrap or foundation .

Alternatively you could just float left and add margin right to the first 3 elements.

eg http://jsfiddle.net/yux07nom/5/

<div class="calloutWrapper">
    <div class="callout">Callout</div>
    <div class="callout">Callout</div>
    <div class="callout">Callout</div>
    <div class="callout last">Callout</div>
</div>

And the CSS

.callout {
    width: 24%;
    min-height: 100%;
    background-color: blue;
    float:left;
    margin-right:1.3333333333%;
}

.callout.last{
    margin-right:0;
}

Answer 4

I'm not sure there's an ideal solution to this. Your best bet is to set the font size of the .calloutWrapper div to zero and then reapply a useful font-size value to the .callout divs, like this : http://jsfiddle.net/2dgx98ye/

Note however, that some older browsers, particularly some used on mobiles, try to apply a minimum font-size which breaks this. In modern browsers, even when the have a minimum font-size configured, do not enforce it on elements where the font-size is 0.