Unordered wrapping CSS list layout issues [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 3 years ago.

Improve this question

Maybe I'm going about this the wrong way but I'm trying to create a <ul> filled with elements like this:

<li>
    <div>
        <img src="img/productname.png" alt="desc" />
        <h2>Product name</h2>
        <p开发者_C百科>This text is variable in lenght so the height of each list item may differ.</p>
    </div>
</li>

Since the website this is going on has a max width I need to wrap after a certain number of items (three seems to be the sweet spot) but I'm having trouble remembering how to go about this.

It's also important that the images are all at the top of each "row" and that the next row isn't broken by the previous one. If I just use float:left; on the list items and the first item in the list has a longer description than the other then I end up with this item blocking the items on the next row so that I get a table like:

+-----+-----+-----+
|     |  2  |  3  |
|  1  +-----+-----+
|     |     |
+-----+  4  |
      |     |
      +-----+

Now, what I need is something that gracefully allows just adding more list items and that creates a layout like:

+-----+-----+-----+
|     |  2  |  3  |
|  1  +-----+-----+
|     |
+-----+-----+
|  4  |  5  |
|     +-----+
+-----+

Is this even possible or am I just imagining that I've created layouts like this before?

(BTW, the reason I don't want to use tables for this is because it's not tabular data, it's a product listing that has to wrap, and clearly googling for anything that has both "css/html" and "grid" in it is hopeless thanks to the current grid layout fad)

---

If you don’t need it to work in Firefox 2 and earlier, you could set the <li>s display to inline-block.

To make that work in IE 6 (and possibly IE 7, I forget when proper inline-block support was added), you can set them to display: inline. As long as they’ve got a defined width (which I assume they have), then they’ll display as if they’re inline-block — see http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

---

Well you can achieve that effect without using tables but using divs instead. Just place 1, 2, and 3 in one div and 4 and 5 in another (obviously keeping each subset of items in its own ul tag). Not sure if this is what you were after. Sounds like a rather complicated structure you're trying to achieve.