ansaurus

Question

Creating a horizontal fluid layout in css that works like a table

Answer 1

A:

There's probably a better way to do this, but this was my first idea.

<!doctype html>
<html>
<head><style type="text/css">
    div
    {
        display: table;
    }
    div p
    {
        display: table-cell;
    }
</style></head>
<body>
<div>
    <p>1 fluid area here</p>
    <p>2 fluid area here</p>
    <p>3 fluid area here</p>
</div>
<div>
    <p>4 fluid area here</p>
    <p>5 fluid area here</p>
    <p>6 fluid area here</p>
</div>
<div>
    <p>7 fluid area here</p>
    <p>8 fluid area here</p>
    <p>9 fluid area here</p>
</div>
</body>
</html>

HaleFx 2010-03-22 11:22:08

This might work.I need to try it out and modifiy it a bit. Will let you know

ivordesign 2010-03-22 15:25:41

Ok it works with my modified code too, but not IE. Haven't look at safari or opera yet but i'm not fussed on them. My modification only involves changing the <p> to <div>'s and adding borders to see how they actually look.

ivordesign 2010-03-22 15:34:23

Answer 2

+1 A:

It sounds like you are referring to the holy grail of layouts. Check out these resources on the topic:

http://www.alistapart.com/articles/holygrail

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Kevin 2010-03-22 11:31:59

Unfortunately the holy grail wont work. HG relies on a fixed width for each div will wont work in my scenario.

ivordesign 2010-03-22 15:23:47

ansaurus

tags:

views:

answers:

Creating a horizontal fluid layout in css that works like a table

related questions