Design without tables—I don't get it.

[zneak]

Usually, I'm rather enthusiastic about web technologies. It's been some time since I decided to give up designing with tables. However, I think I've hit somewhat of a wall.

What I want is fairly simple: here is an example. The box on the right has a fixed width, but the main contents scales with the page. And then, if we remove that box, the contents take up the whole width of the page.

Problem is, it works with a table. I don't want that.

Stupidly enough, I can't find a way to reproduce that behavior using CSS and floating elements. If I set two elements with the float:left property, then they both need to be fixed-width, and that means neither can scale to the size of the page if the other disappears. If I set just one to be floating to the left or right, then borders and backgrounds from the non-floating one will overlap the floating one.

How come there's nothing easy to use in the CSS standards that will let me do something that's been done since immemorial times on the Web? Tables are deprecated for design. Why are they still the easiest way to achieve things like that? In fact, the only real solution I could come up with is using the display:table* CSS attributes to fake that I'm using tables.

Excuse the rant. Especially since it's my first post here.

[zneak]

Okay, so actually there's a way: simply using overflow:hidden will work. (Well, not under IE6, but that's not a surprise.)

[JAB Creations]

You can have...

Content: static width
Side: static width

or

Content: dynamic width
Side: static width

or

Content: dynamic width
Side: dynamic width

I do all my layouts dynamically.

The problem with CSS is not CSS, it's the poor understanding of the standard. Most people jump on to the CSS2 bandwagon without a clue how CSS1 works. Heck, IE4 and Opera 4 can render dynamic/fluid CSS1 layouts no problem so long as you don't try to add CSS2 in to the picture.

The key is to only apply the width to parent divisible elements and then to emulate padding on the parent divisible element you use margins on the child divisible elements.

This is because if you set the width then anything you add to it (e.g. border, margin, and padding though not outline) is added to the width where as if you do not define the width of an element then the properties I just mentioned will subtract from the width. The last important factor is float. If the width is not defined and float is set then the divisible element will collapse to use only the width of it's inner-content. If the element is not floating then the width will automatically take up 100% of the available width.

So in essence if you take that in to consideration it's merely a matter of using a second set of divisible elements which is what should be done in the first place.