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

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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

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

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

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

Alex wrote :
Quoted text here. Click to load it

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

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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

Quoted text here. Click to load it

Misusing position: relative. z-index is certainly unneeded and illogical
use here.

Quoted text here. Click to load it

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:

Simple 2 column CSS layout with tutorial on how to create templates:
(excellent resource) /

3 columns (abs. pos.) scalable and fluid:

3 columns scalable and fluid (The "I can't believe it's not a table!"

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.

remove blah to email me

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

Hi G=E9rard,

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

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

Alex wrote:
Quoted text here. Click to load it
   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)

Site Timeline