Making a CSS Grid without float

Question

As the title would suggest I need to make a CSS Grid without losing float, since that would interfere with the Waypoints JS Plugin...

Anyway, I stumbled upon display: inline-block; but if the boxes in the grid take up 100% of the width of the container this only works if you write all the Code in one Line (JSFiddle 1)

Since my Project is a Template, I can't just force the user to write all his Code in one Line.

Is there any way to solve this problem?

Udate 1:

white-space: nowrap; doesn't help me either because it screws up all the text within the element (JSFiddle 2)

Udate 2:

This font-size: 0; Solution doesn't help me because i also need text in the Parent Element

Answer 1

Update:

Working example on jsFiddle.

Setting a font-size: 0; to the parent element, then setting it back to the desired size on the containing element will fix the problem. Also be sure to use vertical-align: top; on the containing elements so unequal lines of text will both start at the same position at the top.

Note: if you need the two divs to appear in equal height (due to background colors, image, etc.) you'll need to use the faux columns technique.

.left {
    background: red;
    height: 140px;
    width: 55%;
    margin: 0 5% 0 0;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
.right {
    background: orange;
    height: 140px;
    width: 40%;
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 0;
}

Fix if the divs do not contain text:

Working example on jsFiddle.

Add white-space: nowrap; to the section rule:

section {
    background: black;
    width: 100%;
    margin: 0 0 20px;
    white-space: nowrap;
}

For more information on the white-space property, see: http://www.quirksmode.org/css/whitespace.html