divs only as wide as their content

Are divs really as useful as tables?

[DevilBear]

I'm trying to replace a table based layout with divs... but am running into a problem:

Tables, if left to their own devices, will be only as wide as the text/content they contain. Divs, on the other hand, seem to have a choice of two widths: 100%, or whatever I explicitly set them to.

I can set a div's width in ems... but the proper width is going to be different for every individual div. I can't just set div.someclass { width: 20em; } and have it work in all instances.

On a static site, I could go through every div, figure out how wide it should be, and set it in the code... <div class="anotherclass" style="width: {somewidth}em;">... obviously this won't work with dynamic content.

So. Any way to do it? Or am I back to tables?

[DrDoc]

The reason is that divs and tables are two very different types of elements.

There are two types: inline, and block level.
Tables are hybrids of the two.

You can use divs, but make them render like tables, using the CSS display property. However, that's kinda backwards ;)

[DevilBear]

I think I'm satisfied that this is something you "can't do with CSS". Thanks.

[DrDoc]

Well, you can do it with CSS... It will just emulate tables (which is why that property is there)

[drbrain]

The real answer is that divs don't really emulate tables, but they can (sorta). The nice thing about using div vs. table is that you get to think entirely differently about page layout.

A div can easily be positioned anywhere you want, so you don't need to have your content displayed in order of definition. div-based layout allows you to do things that you can't do with table.

(In a browser that supports display: table*, you can fully emulate tables with divs, but it'd end up being an ugly hack.)