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