PDA

View Full Version : A three column layout using CSS only with resizable center colum


tevz
06-21-2006, 06:22 PM
Hello!

I want to make a three column layout using CSS only but the center column must be resizable.
And if i delete from html the third colum, it need to works right. Do you understand me?

Example:
<div id="left">blabla</div>
<div id="center">blabla</div>
<div id="right">blabla</div>
Left and right colum have limitation in px (width : 185px) and center colum must be resizable in the center.

And if i delete right div tag, for example:
<div id="left">blabla</div>
<div id="center">blabla</div>
Left colum has width also 185px and center colum must be resizable and must cover all space.

Is possible to make this just with css?

beemerz
06-21-2006, 07:10 PM
yes. it won't look exactly like that though (the code)
here would be the code

CSS

center{width:100%;padding:0px;margin:0px;}
left{width:185px;float:left;height:100%;}
right{width:185px;float:right;height:100%;}

HTML

<div id=center>
<div id=left>left stuff</div>
<div id=right>right stuff</div>
center stuff</div>

didn't test it, but i think that should work. either one or both the sides can be omitted. sorry about no tabbing, typed it directly in here.
tell me if that works. (looks right, to me at least)

tevz
06-21-2006, 07:20 PM
This isnt working...

It isnt so simple :S

What do you think, is it better to do one table with 3 colums?

beemerz
06-21-2006, 07:26 PM
tables would make it very easy, but you'd have to manually put in colspan="2" when one of the sides isn't there.

<table width="100%"><tr><td id="left" width="185px"><td id="center" width="100%"><td id="right" width="185px"></tr></table>
should work if memory serves, even though width=100% is specified it doesn't take the whole 100%. If that doesn't work another way would be instead of 100% using 1*, which sets it to relative width to available space, though it may be outdated by now. I almost never see it. Dunno if it complies with xhtml 1.0, but i think it still works.

tevz
06-21-2006, 07:28 PM
No, i dont need to add colspan="2", just dont include <td id=right>..</td> :)

I have like this right now, but iam repairing my page and i thought i can change this...

beemerz
06-21-2006, 07:30 PM
true

if you want to use css, the code i put earlier works, i just forgot # before the css id elements.
so it would be #left, #center, and #right.

if you wanna see it, go to http://combustiblepancreas.net/testz.html

tevz
06-21-2006, 07:53 PM
Hm hm... I have more complex situation and dont working like this-i dont know why.

I make this with table, and working fine.

Thanks anyway.

_Aerospace_Eng_
06-22-2006, 01:39 AM
Why would you make this with a table? Tables aren't meant for page layout. I suggest you read this: Why tables for layout is stupid? (http://www.hotdesign.com/seybold/index.html)
Check out this example: http://bonrouge.com/3c-hf-fluid.php