Generating a CSS grid without a float
As the title suggests, I need to create a CSS Grid without losing the float, as this might interfere with the Waypoints JS plugin ...
Anyway, I came across display: inline-block;
but if the fields in the grid take up 100% of the container's width, this only works if you write all the code in one line ( JSFiddle 1 )
Since my project is a template, I cannot just force the user to write all of their code on one line.
Is there a way to solve this problem?
Udate 1:
white-space: nowrap;
doesn't help me either because it messed up all the text inside the element ( JSFiddle 2 )
Update 2:
This font-size: 0;
Solution doesn't help me because I also need the text in the parent element
source to share
Update:
Setting the font-size: 0;
parent element and then setting it back to the correct size in the containing element will fix the problem. Also remember to use vertical-align: top;
for contained elements, so unequal lines of text will start at the same top position.
Note: if you need two divs to appear at the same height (due to background colors, image, etc.), you need to use faux columns .
.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 divs do not contain text:
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 property white-space
see http://www.quirksmode.org/css/whitespace.html
source to share
CSS Tricks has a great article on removing extra whitespace when using inline-block
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
source to share