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

Question

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

Answer 1

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?

Answer 2

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?

Answer 3

ohh ok i get it... in firefox it works but not in iexplorer... i agree with @GuidoH and @pekka, you should not use it like that... but if you need to, if you really really really need to... you could use display:inline the problem is that you wont be able to change the width

Answer 4

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