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.

@bobek floating all divs left will not get div n.4 to expand to fill the remaining space, the way <td>s would do — Luca
– Luca, Commented Oct 17, 2012 at 13:16

Andy · Accepted Answer · 2012-10-17 13:23:06Z

23

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)

edited Oct 17, 2012 at 13:23

answered Oct 17, 2012 at 13:11

Andy

14.6k3 gold badges55 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chris Over a year ago

since i don't have to support browsers < ie8 this is a veeery good solution! What if i need to have this vertically (i tried to modify the example to have the divs stacked vertically but that don't seem to work) is there any other magic spell for this? Thanks so far!

Andy Over a year ago

Here you go. jsfiddle.net/fa9FJ/4 I got myself confused half way through so this may not be the optimum technique for it, and may be overly messy, but it works! (to test, change the height of #container, resizing the window doesn't work for height)

Chris Over a year ago

oky i got this same thing to work vertically here: jsfiddle.net/UXhbJ/2 thanks a lot. That solves 99% of my css problems.

Andy Over a year ago

Glad you got it sorted :) Feel free to comment here if you get any related problems

elrado Over a year ago

Thanks I needed that :). And also to support older browser you could replace section with <div class="section"> and section {...} in css with div.section {...}. Thanks again @Andy and +1 of course.

Manu · Accepted Answer · 2012-10-17 13:55:40Z

8

http://jsfiddle.net/lnplnp/bFrmD/

#div1 {
    width: 60px;
}
#div2 {
    width: 30%;
}
#div3 {
    width: 40px;
}
#div4 {
}
#div5 {
    width: 100px;
}
.layout {
    display:table;
}
.cell {
    display: table-cell;
}

<html>
    <head>
        <title>DIV LIKE TABLE</title>
    </head>
    <body>
        <div class="layout">
            <div id="div1" class="cell">1</div>
            <div id="div2" class="cell">2</div>
            <div id="div3" class="cell">3</div>
            <div id="div4" class="cell">4</div>
            <div id="div5" class="cell">5</div>
        </div>
    </body>
</html>

Cross your finger ! With recent broswers you can do it now !

answered Oct 17, 2012 at 13:55

Manu

8191 gold badge10 silver badges30 bronze badges

Collectives™ on Stack Overflow

Layout divs in css like table cells in HTML Tables

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related