Wednesday, September 12, 2007

The div vs. table conundrum: blocks, inline-blocks and those damned dimensions

First off, all visit this please.

(My desktop wallpaper for the past days)

I love this bit: Time spent trying to get the layout to work using only CSS before giving up and using tables (besides, swearing and getting the bastard to work in Internet Fucking Explorer!)

I would give up tables for div's any day. The only thing which eventually gets me in the end is that div's are bloody block level elements!

Which basically means that they will span the entire containing block - and not wrap the inner content. Here's an example:

This is a div

{Some following content}
This is a table

{Some following content}

What do I do if I want it to wrap the content?
a) float:left Then I have to start worrying about clearing floats - for which there is no single multiple browser compatible CSS-only solution.
b) display:inline Which means I can't apply any dimensions. No width, height, margin or padding [only left and right margin/padding apply if specified]
c) display:inline-block Not many takers (browsers)

Thus, which brings me back to tables: the only element which behaves as a block but wraps the inner content.