multi-column fluid layout with css?

They have: 43 posts

Joined: Sep 2005

Hi all,

Previously I asked everyone how to do a 2 column table in css, and got the answers.
So I implemented it on my site, but after a while, I realized I'd rather not use tables at all. Whenever I changed the layout via the css file, I also had to edit the html as well. It'd be better for me to just edit one file instead of two all the time.

So I want to convert the table into a pure css layout. How do I make multiple columns in css, that can behave like a table?

I have 3 columns in the same 'row' that I want to create, but the 'row' needs to be scalable so I can add columns in the future.
Meanwhile, these columns each have the same width, and together fill up the available space in their containing div. And they resize themselves evenly no matter what browser resolution.

I tried doing this with float left and right and width=33%, but the center column always acted unpredictably. Further, I don't see how I could add more columns later.

Anyone know how to do this? Thanks in advance!

Busy's picture

He has: 6,151 posts

Joined: May 2001

Take a look at this site http://www.pixy.cz/blogg/clanky/css-3col-layout/
that the sort of thing your after?

DaveyBoy's picture

They have: 453 posts

Joined: Feb 2003

http://tools.i-use.it/

that's a pretty neat page to try too Smiling

They have: 43 posts

Joined: Sep 2005

thanks but no. let me be more specific:

Imagine you have a table, one row, 4 columns.
The table width is 100%
Each column width is 25%

Now how could I code a style sheet to do this, without actually using a table in my html?

TIA!

demonhale's picture

He has: 3,278 posts

Joined: May 2005

hmmm.... go to a-list-apart ALA site theres some example there...

or its like this, if I make it for you:

#column1 {
width:25%;
float:left;
background:#fff;
padding-bottom:10px;
}

#column2 {
width:25%;
float:left;
background:#fff;
padding-bottom:10px;
}

#column3 {
width:25%;
float:left;
background:#fff;
padding-bottom:10px;
}

#column4 {
width:25%;
float:left;
background:#fff;
padding-bottom:10px;
}

if you want borders around the table add border: #000 1px solid; to the css

They have: 43 posts

Joined: Sep 2005

Yes! Thank you!

When I was trying to do this, I would use float: right for the right-most column, and the middle column was always unpredictable.

So I see in your example you use float: left for all the columns... that solved everything! Thanks Demon

DaveyBoy's picture

They have: 453 posts

Joined: Feb 2003

i never understand stuff like this, i mean to me that code would just place 4 things on top of each other, since they are all the same - CSS is weird Sticking out tongue

robbluther's picture

He has: 73 posts

Joined: Jan 2006

If you need to add a footer, won't you need to put those four columns in a container with a clearFloat class too?

--They would overlap with absolute positioning... I think.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

yeah, rob... you should clear them if you add a footer...

dk01's picture

He has: 516 posts

Joined: Mar 2002

Remember to check this is all your target browsers. CSS was not fully developed in some older browsers so if that is your target market you will want to confirm your solution works. May take some tweaking here and there.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.