Layout divs in css like table cells in HTML Tables

Question

One more time today i stumbled upon a problem i always have with css layouts. I'd like to have 5 divs in a horizonzontal row. Let's say for example their widths should be:

• 1 : 60 px,
• 2 : 30 %,
• 3 : 40px,
• 4 : *
• 5 : 100px

where * stands for "fill up the remaining space". Back in the old days that's been the way we layouted width tables. Nowadays due to accesibility reasons html tables are banned for layouts. This is just an example. I'm searching for a general solution.

Does someone know a generator, a lightweight javascript solution (can be a jQuery plugin), a tutorial, a book, or a magician which can help me to solve this problem for now and forevermore?

Allthough a javascript based solution is possible a non-script solution would be preferred.

Answer 1

You can use display:table to create this effect, I made a quick fiddle

This makes the individual div's act like table cells, and the section is the table, I used a section just to have cleaner code, a div would work too.

You will notice the table cells get smaller than you specified if the window size is too small, this is because of the table's default behaviour. To combat this just add a min-width (with the same value as the width)