3-columns, center fixed, sides fluid and equal?

[Bill Posters]

How?

I see oodles of guides and prefabbed layouts for the more common center-fluid/sides-fixed version of the 3-column layout, but can't find one for the combination I need.

Thanks in advance for any ideas/help/comments/pointers/css/urls/…

[Paul O'B]

Hi Bill,

I did this some time ago as an exercise but I haven't re-visited it lately so I hope its of some use.

http://www.pmob.co.uk/temp/3colfluidsides1.htm

I'm not sure how it will stand up in real use but your welcome to use it. I haven't seen anyone else do this either (in css)

Paul

[Bill Posters]

I was hoping there might be a simpelr, claener way of doing it.
Your method seems to work in Safari, but MSIE5 barfs on it. and I don't have the energy left to find a tweak to satisfy MSIE/Mac.


The actual application is for this visual effect.
I was hoping to find a non-stacking solution, which is where this specific layout request came from.


As you can see, the left column ("rectoverso") is only used to visually support the central, horizontally-centered main container 'page'.

In the end it was simpler to lay down a 50% wide div tucked into the left and using it to hold a tiling background.
I then horizontally centered the main container div using the dead center/negative margin method ( *spit* *spit* ).

I'd hoped to avoid using position: absolute; on the container div, but had to for the sake of z-indexing (FF/Moz not being a big fan of negative z-index values)


As mentioned, I'd hoped that there would be a more regular solution, as I wanted to avoid using a stacking solution and I've never been a big fan of the negative margin kludge, but it seems to produce the most consistent results as well as being the lightest in terms of the amount of markup/css.

Perhaps I should stop writing off absolute, stacking solutions.


Thx all the same for the attempt, Paul.

[Paul O'B]

Hi Bill,

What you have seems to work quite well and is pretty compact so its probably not worth messing with it

The only drawback I can see is that using the dead centre/negative margin technique is that the layout slides all the way off the left side as the screen is resized smaller. You could avoid that by using the margin-left:auto and margin-right:auto centering and then the container, header and footer could all be statically positioned (with position:relative for stacking order etc.)

But I'm well aware that you may have already tried that method (and many others) anyway, so I'm probably wasting your time

Paul

[Bill Posters]

…using the margin-left:auto and margin-right:auto centering and then the container, header and footer could all be statically positioned (with position:relative for stacking order etc.)

But I'm well aware that you may have already tried that method (and many others) anyway, so I'm probably wasting your time

Paul

Nono…

I could have sworn that I'd tried that, but clearly not as it does solve all the problems.
God knows what I was doing wrong/differently.
My head clearly wasn't on straight yesterday, so thanks for the 'coffee call'.