View Full Version : A three column layout using CSS only with resizable center colum
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)
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.
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
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
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.