CODEWITHSUNDEEP
css
user747970
user747970

Reputation:

display: table-cell with multiple rows (equal height columns, multiple rows)

Given a list:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

And this CSS:

ul { display: table; width: 600px; }
li { display: table-cell; width: 33%; }

You'd expect 3 rows of 3 columns, each 200px-ish wide. But it seems the li width is ignored.

Is there any way to force rows with display: table-cell without adding in extra markup?

Edit: Also, I'm using table-cell because I want then entire row to have the same height (despite varying content), as I want to position something in all three cells in each row, but at the bottom of the lowest cell. That is a confusing sentence I know.

Basically I want to turn a bunch of lis into equal height columns, but with multiple rows only using CSS. All the equal height column solutions I've seen can't do this.

Upvotes: 14

Views: 37791

Answers (6)

Populus
Populus

Reputation: 7680

I am using display: inline-block and vertical-align: top

But if you want background that stretches with height as well, javascript is the only way (that I can think of)

Upvotes: 1

Dmitri
Dmitri

Reputation: 3561

I think there is no semantic solution. It should be wrapper container for every set of items to apply same height to them. But it's possible to solve design problem (kinda make a grid) here is an example how to make it: multiple rows with same height on a line

Upvotes: 1

user747970
user747970

Reputation:

This is the solution I came up with.

The markup is slightly modified, to remove the whitespace. This is because with the lis set to display: inline, the newlines between them will take up some of the width.

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46629

If you can't change the markup, it can be done without faking a table. You can make the list items display:block instead of display:table-cell.

By the way, 33% of 600px is not 200 pixels. Use 200px!

Edit:
If you know what the maximum height of the content is going to be, you can use that as the height for all list items of course, and use vertical-align or line-height to align the contents. (But as that's not an option either, the solutions that don't change the markup are out.)

Upvotes: 0

sandeep
sandeep

Reputation: 92863

You can give display:inline-table instead of display:table-cell to LI. Write like this:

ul { display: table; width: 600px; font-size:0;}
li { display: inline-table; width: 33%;background:red; font-size:15px;}

Check this http://jsfiddle.net/56FGT/1/

Upvotes: 14

Naveed
Naveed

Reputation: 42143

If you want css to show 3 <li>s in one row each of width 200px in same <ul>, You can try something like this with your above html:

ul { list-style: none outside none; width: 600px; }
li { float: left;display: block;width: 200px; height: 33px; }​

Demo

Upvotes: 3

Related Questions