CODEWITHSUNDEEP
csshtmlinline
Igor K
Igor K

Reputation: 1371

How to emulate table cells with CSS (without float)?

Got:

<ul>
    <li><div style="width:200px; display:table-cell;">Something here</div> <div style="width:40px; display:table-cell;">Edit</div> <div style="width:40px; display:table-cell;">Delete</div></li>
</ul>

Hopefull you get what I'm trying to do, have the first div be a fixed width. But I can't seem to do this, each div takes up a line by itself.

How can this be done without messy floats?

Thanks

Upvotes: 0

Views: 1475

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Use span instead of div perhaps? (avoid new lines)

Upvotes: 0

Guido Hendriks
Guido Hendriks

Reputation: 5776

Please, never do that again! The way to do it would be with floats, but you really NEVER wanna use something like that! By the way, div's aren't allowed within an ul. If you wanna display data like that, you should use real tables.

Did I mention that you really shouldn't use that under any circumstance?

Upvotes: 3

Pekka
Pekka

Reputation: 449485

Hopefull you get what I'm trying to do, have the first div be a fixed width. But I can't seem to do this, each div takes up a line by itself.

For display-table:cell to have effect, the parent element needs to be set to display: table-row and the parent parent element to display: table.

That said: Are you sure a <table> element is not the more appropriate thing here?

Upvotes: 1

Related Questions