473,605 Members | 2,084 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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:relati ve; z-index:4;}

I tried replacing #center with the following:

#Center-Left {margin:0 50% 0 142px; position:relati ve; z-index:4;}
#Center-Right {margin:0 142px 0 50%; position:relati ve; 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

Sep 1 '05 #1
7 3236
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

Sep 1 '05 #2
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:relati ve; 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:relati ve; z-index:4;}
#Center-Right {margin:0 142px 0 50%; position:relati ve; 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
Sep 2 '05 #3
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
Sep 2 '05 #4
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
Sep 2 '05 #5
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)
Sep 2 '05 #6
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

Sep 2 '05 #7
"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
Sep 2 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
100381
by: Craig Thomson | last post by:
How can I have some text aligned to the left of the page and some more text aligned to the right using only CSS without a table? SPAN doesn't have any alignment, and there is only a single DIV block per line, and so only one alignment. TIA Craig
1
7569
by: Chris Pudney | last post by:
G'day, I am using CSS to construct bar charts from nested DIVs. In general this works fine. However, in certain circumstances I need to display multiple charts inline. To get consistent results on IE and Moz I wrap each chart in a <TABLE style="display: inline">. Unfortunately, IE ignores the top-margin and left-margin properties of a few of the charts, which end up in the top left corner of the page. The charts that get this treatment...
2
5690
by: sylvian stone | last post by:
Hi, I'm trying to do something that has always been easy with tables - namely use a three column layout, and above the main layout, show three images - one on the absolute left, one on the absolute right, and one in the middle. The one in the middle needs to be centered, as various browsers display slightly differently. However, using the CSS and code below, either the first image is not shown (IE) or the right image is shown below...
8
1706
by: Mason A. Clark | last post by:
Can anyone comment on the frequency (prevalence?) of pages that are stacked on the left? I see it as a concession to 800x600 screens. OK. But is there a way of using the full 1024x768 or larger screens without forcing horizontal scrolling on smaller screens? I'm seeing 17" monitors going to waste. Mason C
1
2316
by: fleemo17 | last post by:
For increased accessibility, I've replaced "display:none" with the Off-Left method of hiding my CSS drop-down menus because the Jaws screen reader doesn't see any of the menus hidden with "display:none". The Off-Left method (placing elements way over to the left beyond the browser window) seems to work well in everything except IE 6 for the PC, where it displays the drop-downs about an inch to the right of where they should be. (View...
0
2044
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600 (looks fine at larger screen sizes) when the left menu box that should float left is drifting to the right in Internet Explorer 6.0 (it doesn't drift to the right in Netscape 7.1).
1
2264
idsanjeev
by: idsanjeev | last post by:
<%@ Language =vbscript%> <% Option Explicit %> <html> <head><TITLE>VOICE OF BARAUNIANS</TITLE></head> <body> <!--#include file="front.inc"--> <div style="Position:Absolute; width:700; TOP:0; left:180; background-color:#f0f0f0"> <% Dim conn dim objrs
7
1425
by: Rulenoff | last post by:
I want to thank you in advance. I was able to clean up 20 errors since iv'e last posted and now I have what I believe the right doctype loading correctly. However I have 10 errors remaining on my web site still. http://www.portcitymilitia.150m.com/ I can't seem to figure out why these 10 lines are erroring... If someone again could point me in the right direction I'll would appricate it. My code is as follows. <!DOCTYPE html...
0
8009
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8427
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
6752
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
5892
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
3914
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
3962
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2441
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1548
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1279
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.