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

Author

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

Alex

2005-09-01, 7:40 pm

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

2005-09-01, 7:40 pm

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

Alex

2005-09-02, 7:26 pm

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

Thanks again ---

Sam Alex