Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UL+CSS for grid layout

Tags:

html

css

layout

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:

alt text

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:

alt text

Is there any pure-CSS cross-browser way that will allow grid layout I want and will not enforce markup change?

like image 844
nkrkv Avatar asked Apr 26 '10 09:04

nkrkv


1 Answers

Inline blocks could perhaps be useful here.

like image 138
Boldewyn Avatar answered Oct 05 '22 22:10

Boldewyn