Creating left and right absolute columns and two center fluid colums in CSS

[Alex]

Hi Everone,

I need some advice on how to setup 4 columns where the outside two are
absolute (120px) and the inner two (side by side) are relevent (Fluid)
and change with the screen.

Here's my rough layout:

[ 120px ][ Center 1 ][ Center 2 ][ 120px ]

Center1 and Center2 columns are equal length and combined are the rest
of the screen (total screen width minus 240).

I already have it to where it creates the left and right columns and
one column in the middle that fits what's left:

#Body {width:100%; z-index:1;}

#Left{position:absolute; top:0; left:0; width:140px; z-index:2;}

#Right{position:absolute; top:62px; right:0; width:140px; z-index:3;}

#Center {margin:0 142px 0 142px; position:relative; z-index:4;}

I tried replacing #center with the following:

#Center-Left {margin:0 50% 0 142px; position:relative; z-index:4;}
#Center-Right {margin:0 142px 0 50%; position:relative; z-index:5;}

But though the columns are left and right of one another and in the
center, it puts the Center-Left caticorner to Center-Right instead of
next to:

[ 120px ][ Center 1 ] [ 120px ]
[ 120px ] [ Center 2 ][ 120px ]

Ideas??? How can I create two center columns next to one another that
together are 100% of what's left after the left and right columns?

Thanks for any advice or suggestions ---

Sam Alex

[Alex]

Correction on the code snippets I entered... All the px should be
120px instead of 140px and 142px. I'm using several online examples to
make this work, and I copied and pasted from the wrong window ---

Sorry for the confusion.

Sam Alex

[Gérard Talbot]

Alex wrote :

Hi Everone,

I need some advice on how to setup 4 columns where the outside two are
absolute (120px) and the inner two (side by side) are relevent (Fluid)
and change with the screen.

Here's my rough layout:

[ 120px ][ Center 1 ][ Center 2 ][ 120px ]

Center1 and Center2 columns are equal length and combined are the rest
of the screen (total screen width minus 240).

I already have it to where it creates the left and right columns and
one column in the middle that fits what's left:

#Body {width:100%; z-index:1;}

1- Is there a single case of webpage design you know of where the body
element does not use, does not take 100% of the available space from its
parent element?
2- z-index property only applies to absolutely positioned element. Are
you here absolutely positioning the body node? And even if you do (why
would you do that?), then the width of the body would still be auto,
idem est "take as much as you can horizontally".

#Left{position:absolute; top:0; left:0; width:140px; z-index:2;}

#Right{position:absolute; top:62px; right:0; width:140px; z-index:3;}

I do not understand why you need to declare differential local stack
order for #Left and #Right: that's not needed.

#Center {margin:0 142px 0 142px; position:relative; z-index:4;}

z-index and position: relative should never go together.
Mixing position relative and position absolute should not be your first
choice; the more complex your design is, the more it can (will?) break
in browsers. Also, text and inline elements in abs. pos. elements are
very difficult to precisely select in MSIE 5+. So, when possible, it's
better to rely on margin or float... but there are bugs also with these.
Sometimes, when you know well these bugs, you can choose which ones can
be easier to deal with, workaround..
I tried replacing #center with the following:

#Center-Left {margin:0 50% 0 142px; position:relative; z-index:4;}
#Center-Right {margin:0 142px 0 50%; position:relative; z-index:5;}

Misusing position: relative. z-index is certainly unneeded and illogical
use here.
But though the columns are left and right of one another and in the
center, it puts the Center-Left caticorner to Center-Right instead of
next to:

[ 120px ][ Center 1 ] [ 120px ]
[ 120px ] [ Center 2 ][ 120px ]

Ideas??? How can I create two center columns next to one another that
together are 100% of what's left after the left and right columns?

Thanks for any advice or suggestions ---

Sam Alex

The nr 1 idea I would give you is to study, then try some of the best
CSS templates already available on the web which have been tested,
tuned, corrected instead of trying to redo, restart all over from point
zero with a much more difficult design.

List of CSS templates:
http://www.maxdesign.com.au/presenta...outs/index.cfm

Simple 2 column CSS layout with tutorial on how to create templates:
(excellent resource)
http://www.456bereastreet.com/lab/de...slayout/2-col/

3 columns (abs. pos.) scalable and fluid:
http://www.positioniseverything.net/...l.stretch.html

3 columns scalable and fluid (The "I can't believe it's not a table!"
layout):
http://www.positioniseverything.net/threecolbglong.html

And there are other resources too. What's important is that
- such CSS templates use entirely valid markup code (preferably strict
definition) and
- valid CSS code and
- that they'll work as best it can in MSIE 6, Firefox 1.x, Opera 7+,
Safari 1.x and other good W3C web standards compliant browsers (Icab 3,
Konqueror 3.x, etc).
- Also, scalability (font-size increase won't break layout),
- accessibility (eg selecting text with mouse or keyboard) are good in
such templates.

My recommendation is also to stay away from 4 columns design: you have
to consider that there are still a lot of people using 800x600 scr. res.
while there are lots of 1024x768 scr.res. users who need to resize
font-size to more readable size (12px or higher).
Scalable 4 column design may only be possible after a lot of designing
work with really excellent CSS 2.1 browsers like Mozilla 1.8b2+, Firefox
Deer Park, Safari 1.3+, Opera 8.x, Icab 3.

Gérard
--
remove blah to email me

[Spartanicus]

Gérard Talbot <ne***********@gtalbot.org> wrote:

2- z-index property only applies to absolutely positioned element.
z-index applies to a positioned element (an element is considered to be
positioned if it's position property is set to, or resolves to, any
value other than static).
z-index and position: relative should never go together.

Bullshit.

--
Spartanicus

[Gérard Talbot]

Spartanicus wrote :

Gérard Talbot <ne***********@gtalbot.org> wrote:

2- z-index property only applies to absolutely positioned element.

z-index applies to a positioned element (an element is considered to be
positioned if it's position property is set to, or resolves to, any
value other than static).

Ok. Thanks for the correction. But my other comments regarding stack
level and number of local stack still stands. You never (or very very
rarely) need to have 5 stack levels.
And one can definitely design a scalable multi-column web page without
even specifying a single z-index declaration.

Gérard
--
remove blah to email me

[Jim Moe]

Alex wrote:

I need some advice on how to setup 4 columns where the outside two are
absolute (120px) and the inner two (side by side) are relevent (Fluid)
and change with the screen.

Here's my rough layout:

[ 120px ][ Center 1 ][ Center 2 ][ 120px ]

A rough URL would be more useful.
Here is a thought. Create a two column layout. In each of those two
columns create a two column layout. You'll be glad you did.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alex]

Hi Gérard,

I have to admit my CSS skills are still evolving, so what I have might
not be per standards... Something else to note is that this is for a
custom application for our Intranet and not for the general public.
Each computer that'll be using this website will be 1024x768 (or
better) and IE 6 on Win 2K or XP.

I'm working on a dashboard-type program that I need 4 columns to
present the data correctly, and though I can do this in tables (already
have it written and working with tables), I'm trying to get it moved to
CSS for cleaner code and easier editing by the user.

Thanks for all the links and suggestions... I'm thinking what I want to
do might not be possible with CSS, so either I'll stick with tables or
try another solution.

Thanks again ---

Sam Alex

[Spartanicus]

"Alex" <sa*****@gmail.com> wrote:

Something else to note is that this is for a
custom application for our Intranet and not for the general public.
Each computer that'll be using this website will be 1024x768 (or
better) and IE 6 on Win 2K or XP.

That doesn't change much, I presume that those users can unmaximize
their IE6, open a side panel, size it etc. These factors make the size
of their desktop area rather irrelevant.

--
Spartanicus