I got asked whether it's possible to make a 3 column layout with a fixed central area (of say 760px), with fluid left and right columns.
I've been playing with it for a while to see if I can come up with a way of doing it, but I can't seem to make it work. Is it even possible?
Hi, btw.
3 Col, fixed center, fluid left/right
Have you used the CSS Layout Generator on this site?
3 Col, fixed center, fluid left/right
I'm new to that particular tool. It seems to suggest it'll generate the centre col automatically, whereas we're looking for an always fixed width centre. I don't really think it's doable.
I just had a play with the generator, and can't make it do a fixed centre (possibly me being dense??)
3 Colomns: a Fixed center with Fluid left and right columns
Hello all,
I'm new here, and am also interested to find out if it is possible to create this particular layout as fberriman described it.
3 Columns: a Fixed center with Fluid left and right columns
i.e. a three column layout, with the left being fluid, and the center being a fixed width, and the right being fluid.
So you would end up with something like this: http://www.bluerobot.com/web/css/center1.html
BUT if you can imagine that instead of white/blank/empty/unusable space on either side of the content box, there would actually be fluid left/right columns ...
This is what I am hoping to find a solution for, like fberriman i think.
Surely it has to be possible somehow? no?
If anyone has any suggestions or expertise that surpasses mine , your help would be greatly appreciated ...
Thank you kindly for your time,
Cheers,
KJ
(and yes, I have tried the CSS layout generator on this site, but it is not able to do the above explained layout. I've also search google, maybe not hard enough, but also could find very little help.)
Looks possible to
Looks possible to me.
http://www.imaginekitty.com/static-center.html
Uh oh. Absolute positioning alert!!!
This was a quickie. There's probably a better way.
Use negative
Use negative margins.
Untitled Document
*{margin:0;padding:0}
#column1 {
width:50%;
float:left;
margin-right:-250px;
background:#fff;
}
#col1inner{margin-right:255px;background:red;}
#column2 {
width:500px;
float:left;
background:blue;
position:relative;
z-index:10;
}
#column3outer {
width:50%;
float:right;
margin-left:-250px;
}
#column3 {
margin-left:255px;
background:green;
}
#footer{clear:both;background:yellow}
Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content :
Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content :
Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content :
Pob wrote:Use negative
Use negative margins.
Yep, not so challenging, eh?

Doesn't quite work in IE6
Doesn't quite work in IE6 though. You'll need to hide the right float width and give the footer hasLayout
Its the 2 * 50% bug which
Its the 2 * 50% bug which can be offset with a negative right margin on the last float.
Untitled Document
*{margin:0;padding:0}
#column1 {
width:50%;
float:left;
margin-right:-250px;
background:#fff;
}
#col1inner{margin-right:255px;background:red;}
#column2 {
width:500px;
float:left;
background:blue;
position:relative;
z-index:10;
}
#column3outer {
width:50%;
float:right;
margin-left:-250px;
margin-right:-1px;
}
#column3 {
margin-left:255px;
background:green;
}
#footer{clear:both;background:yellow;width:100%}
Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content :
Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content :
Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content :
Pob wrote:Its the 2 * 50%
Its the 2 * 50% bug which can be offset with a negative right margin on the last float.
Of course it was; 2×50% too much to ask for really.
lol-you just can't trust
lol-you just can't trust hese new fangled computer things
Updated the last demo (for the last time)as there was an unwanted scrollbar:
3 col layout - Fixed width centre and fluid sides
*{margin:0;padding:0}
#column1 {
width:50%;
float:left;
margin-right:-250px;
background:#fff;
}
#col1inner{margin-right:255px;background:red;}
#column2 {
width:500px;
float:left;
background:#ffffcc;
position:relative;
z-index:10;
}
#column3outer {
width:50%;
float:right;
margin-left:-251px;
}
#column3 {
margin-left:255px;
background:green;
}
#footer{clear:both;background:yellow;width:100%}
Fixed Width Center Column - Fluid sides
Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid
column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content :
This layout is constructed using 2 floats of 50% each. One is floated left and the other floated right. Each float has a negative margin on the opposite side to the way the float is floated. The negative margin width is half the width that you want for your center column.
This will allow the floated center column to slide into place with a fixed width.
Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content
: Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content :
I didn't want to mention
I didn't want to mention the scrollbar. Now you're sure that's the last adjustment
can I mark the thread 'resolved'; oh hang on I hate to take the pixel perfect stance but....
Just more trouble than they're worth 3 col layouts, and I never have liked flexible sidebars, and one doesn't see them in use much.
lol - It is pixel
lol - It is pixel perfect:)
It just depends on which specific pixel you are talking about
Yes I can't see much use for flexible sidebars either but everyone to their own.
Er the one 51% in from the
Er the one 51% in from the righthand side, think it's about the 469th one down, oh hang on that's that flipping dead pixel on my screen that I keep forgetting about and trying to clean off.
Thank you
I think there is some sarcasm going on here, but it is going way over my head for a newbie
Anyway, thank you all for the help ... greatly appreciated.
I don't want the columns fluid for an actual sidebar/menu ... I'm trying to play around with some image positioning, and a weird layout ... and if it was possible (which it obviously is) i thought this kind of layout could be good/helpful.
Anyways, I have plenty to play around with now, so thank you again,
Cheers
KJ
sorry to dissapoint you guys
sorry to dissapoint you guys but the code you provided is still of no use for this type of columns.
here is the little change I did to prove it's of no use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>3 col layout - Fixed width centre and fluid sides</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{margin:0;padding:0} #column1 { width:50%; float:left; margin-right:-250px; background:#000; } #col1inner{margin-right:255px;background:red;} #column2 { width:500px; float:left; background:#ffffcc; position:relative; z-index:10; } #column3outer { width:50%; float:right; margin-left:-251px; } #column3 { margin-left:255px; background:green; } #footer{clear:both;background:yellow;width:100%} </style> </head> <body> <h1>Fixed Width Center Column - Fluid sides</h1> <div id="column1"> <div id="col1inner"> <p>Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : Left fluid column content : </p> </div> </div> <div id="column2"> <p>This layout is constructed using 2 floats of 50% each. One is floated left and the other floated right. Each float has a negative margin on the opposite side to the way the float is floated. The negative margin width is half the width that you want for your center column.</p> <p>This will allow the floated center column to slide into place with a fixed width.</p> </div> <div id="column3outer"> <div id="column3"> <p>Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : Right fluid column content : </p> </div> </div> <div id="footer"> <p>Footer</p> </div> </body> </html>
It's possible-- providing
It's possible-- providing you know how to do it.
Layout by Georg Sortun.
http://www.gunlaug.no/tos/moa_27c.html
But now I want to background
But now I want to background color of the 3 columns to have a 100% height. How must I do that? The height as they are now is dependant off the amount of content inside the div. I can set a fixed height in pixels but height: 100% now doesn't work. Any sollution to that?
One method is faux
One method is faux columns:
http://www.alistapart.com/articles/fauxcolumns/