18 replies [Last post]
fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 47 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

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.

-- Frances

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 2 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

3 Col, fixed center, fluid left/right

Have you used the CSS Layout Generator on this site?

Verschwindende wrote:
  • CSS doesn't make pies

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 47 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

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

-- Frances

kaj
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2006-12-04
Posts: 2
Points: 0

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. Laughing out loud

Surely it has to be possible somehow? no?

If anyone has any suggestions or expertise that surpasses mine Smile, 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.)

Triumph (not verified)
Anonymous's picture
Guru

Looks possible to

Looks possible to me.

http://www.imaginekitty.com/static-center.html

Uh oh. Absolute positioning alert!!! Laughing out loud

This was a quickie. There's probably a better way. Tongue

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 10 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

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 :

Triumph (not verified)
Anonymous's picture
Guru

Pob wrote:Use negative

Pob wrote:
Use negative margins.

Yep, not so challenging, eh? Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 10 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Its the 2 * 50% bug which

Its the 2 * 50% bug which can be offset with a negative right margin on the last float.Smile

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 :

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Pob wrote:Its the 2 * 50%

Pob wrote:
Its the 2 * 50% bug which can be offset with a negative right margin on the last float.Smile

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 10 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

lol-you just can't trust

lol-you just can't trust hese new fangled computer things Smile

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 :




Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I didn't want to mention

Laughing out loud I didn't want to mention the scrollbar. Now you're sure that's the last adjustment Smile 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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 10 years 33 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

lol - It is pixel

lol - It is pixel perfect:)

It just depends on which specific pixel you are talking about Wink

Yes I can't see much use for flexible sidebars either but everyone to their own.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kaj
Offline
newbie
Last seen: 15 years 7 weeks ago
Joined: 2006-12-04
Posts: 2
Points: 0

Thank you

I think there is some sarcasm going on here, but it is going way over my head for a newbie Smile

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

ClaudiuCC
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2008-08-08
Posts: 1
Points: 0

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>

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 22 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

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

digitalecartoon
Offline
newbie
Last seen: 13 years 23 weeks ago
Joined: 2008-08-10
Posts: 2
Points: 0

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?

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 22 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

One method is faux