3 Col, fixed center, fluid left/right

Have you used the CSS Layout Generator on this site?

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??)

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 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 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}

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 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%}

Of course it was; 2×50% too much to ask for really.

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

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 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 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.

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 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 you know how to do it.
Layout by Georg Sortun.
http://www.gunlaug.no/tos/moa_27c.html

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 columns:
http://www.alistapart.com/articles/fauxcolumns/