Question

197

Layout divs in css like table cells in HTML Tables

rated 0 times [ 198] [ 1] / answers: 1 / hits: 21654 / 12 Years ago, wed, october 17, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

briannar

Add To Favorites

Follow

Total Points: 354

Total Questions: 103

Total Answers: 101

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

answered 12 Years ago darennevina · Accepted Answer

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)