Impossible CSS layout? 3 Columns: Fixed center, Fluid left/right

HTML & CSS
1

Hello all,

I am interested to find out if it is possible to create a particular layout using CSS:

3 Columns: a Fixed center with Fluid left and right columns

Everybody can seem to create the opposite layout with ease, but I cannot find anywhere that does this layout! (:

i.e. people can make a CSS layout that is 3 Columns: Fixed left/right columns, with a Fluid center column.

But I would like 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. . .

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

2

Triumph’s replied to your thread over at CSSCreator. Why don’t you check it out?

3

Did you mean something like this that I did about 5 years ago :slight_smile:

http://www.pmob.co.uk/temp/3col-centrefixed2.htm

4

I think this calls for you to add

#td_threadtitle_171943 { font-size: 3em; background: #FF6600; color: white; }

to the embedded stylesheet for the CSS forum index page :slight_smile:

I don’t mean to offend krazykaj at all, I just feel a little of Paul’s pain…

5

Or an updated method.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0}

#column1 {
    width:50&#37;;
    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:-251px;

}
#column3 {
    margin-left:255px;
    background:green;
}
#footer{clear:both;background:yellow;width:100%}
</style>
</head>
<body>
<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>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 : </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>

http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm

6

“I don’t mean to offend krazykaj at all, I just feel a little of Paul’s pain…”

No offence at all :smiley:

I tried, but couldn’t get it to work right … I then figured there was no harm in asking others who had a lot more experience than me … and i’m glad i did :slight_smile:

(BTW, i didn’t even know they had internet 5 years ago :eye: )

Thanks for the help,
I’ll have a play around with what you gave, and if i’ve any more questions, i’ll be sure to ask.

Thank you kindly again,
Cheers
KJ

7

Something else that I have found with the layout is that you can use ‘sliding faux columns’ google it and you should find something on simplebits about it.
This is where you can acheive the same effect of 100% high columns as standard ‘faux columns’ but use an attractive background image that is fluid also.

8

Hi -
Hear, hear on those sliding f.c.'s!

It’s from the book, “Bulletproof Web Design” by Dan Cederholm
& is a must-read IMHO for this type of stuff :wink:

El

9

Solved that ages ago and without using images.:slight_smile:

3 fluid columns with full length different coloured columns :wink:

http://www.pmob.co.uk/temp/3col/3col-percent-01.htm

10

conditional comments hack though

11

conditional comments hack though

Conditional comments are the best way of not troubling other browsers with IE differences. Anyone who says they aren’t using a hack is probably mistaken because any one of the properties that force “haslayout” is in fact a hack although it may not look like it when you view the code.

Using a dimension to force layout when none is needed is indeed a hack. Using inner html nestings to avoid the box model hack is hackier than any css hack :slight_smile:

I would say though that you should only use a hack when there is no other alternative and you can’t (or don’t want to) change the design.

Of course we can all avoid hacks by just using plain text but where’s the fun in that :slight_smile:

12

the only hack i use on a consistent basis is “clearfix”. I will have to implement something soon though, as I am running into this issue - I probably will use a faux background image on two parents to simulate height.

I’m of the opinion that you shouldn’t force a browser to do what it doesn’t want to do.

13

I’m of the opinion that you shouldn’t force a browser to do what it doesn’t want to do.

I’m not sure what that means lol :slight_smile:

IE doesn’t want to do anything properly so you would be a bit stuck there :slight_smile:

As I already mentioned that if you don’t force layout on any parent elements that hold more than simple content then you will suffer from a myriad of bugs. There are still many sites out there suffering from this bug/behaviour and although they have valid code they don’t have unbroken sites.

CSS makes no assumptions about anything and its your job to construct the pieces into the layout of your choice. You are only limited by your own imagination and the shortcomings of some bad browsers implementations of css.

The beauty of CSS is that it can be made to do many things and isn’t tied to one way of accomplishing something either. There are of course the obvious things it can’t do such as equalising columns and you may be right that its perhaps better to design around these rather than use a number of hacks. Or perhaps use a simple table structure fully styled with css.

However, I see nothing wrong with “pushing the envelope” and advanced examples always produce a better understanding of the way things work. Originally it was stated that you couldn’t use negative margins but they have proved to be invaluable in all types of layout and are now commonly used by all.

I never make assumptions about what is achievable with css because every day someone says “this is impossible with css” only to be proved wrong. As proved with the original question in this thread as the answer was simplicity itself and in fact contained no hacks at all and took me all of 5 minutes to do. :slight_smile:

http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm

14

yadda yadda yadda…you’re preachin’ to the choir.

All i’m getting at is when I find myself starting to hack around a problem, it raises a red flag for me.

15

The amount of hacks you use can be substanially diminished by using correct semantic markup and a logical structure of your markup.

But, Paul’s absolutely right - They’re a neccessary evil of todays web design. To make it work in IE is where %95 of your hacks will be needed.

Originally Posted by mark
This is where you can acheive the same effect of 100% high columns as standard ‘faux columns’ but use an attractive background image that is fluid also.

[QUOTE]Solved that ages ago and without using images.
[/QUOTE]
They’re not the same Paul, background images can be much more pretty then a plain color :slight_smile:

16

They’re not the same Paul, background images can be much more pretty then a plain color

Yes I agree, I just meant the technique could be done without images but in most cases I use images to fake the columns anyway as its usually easier :slight_smile: