Layout divs in css like table cells in HTML Tables

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:

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)

Answer

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 !

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.