I have a server-generated html like:
<ul>
<li><!-- few nested elements that form a block --></li>
<li><!-- few nested elements that form anaother block --></li>
<li><!-- etc, X times --></li>
</ul>
All blocks have known width 200px and unknown height. I want <li>
to be arranged in table-like fashion like this:
What I have for now is following css:
li {
display: block;
width: 200px;
float: left;
margin: 10px;
}
All is fine except that columns don't get equal height. And in example above block #4 “snatch” at #1 and the result isn't what I'm trying to achieve:
Is there any pure-CSS cross-browser way that will allow grid layout I want and will not enforce markup change?
Inline blocks could perhaps be useful here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With