multi-column fluid layout with css?
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 posted this at 09:36 — 6th February 2006.
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 posted this at 09:50 — 6th February 2006.
They have: 453 posts
Joined: Feb 2003
http://tools.i-use.it/
that's a pretty neat page to try too
Anita.Bonghit posted this at 02:40 — 7th February 2006.
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 posted this at 02:56 — 7th February 2006.
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
Anita.Bonghit posted this at 04:21 — 7th February 2006.
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 posted this at 04:37 — 7th February 2006.
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
robbluther posted this at 14:16 — 7th February 2006.
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 posted this at 17:03 — 7th February 2006.
He has: 3,278 posts
Joined: May 2005
yeah, rob... you should clear them if you add a footer...
dk01 posted this at 18:56 — 7th February 2006.
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.