Help to align my content

[Tiruak]

Hi everyone, it's the first time I'm posting here.
I'm an old school html coder that's desperately trying to design with css only.

There is one thing I'm not really able to do, and was wondering if someone could help.

Before, I used to have tables to design my sites, and I like to have my content always centralized on the middle of the screen, no matter what video resolution people are using. I used to do that with a main table set to 100%, with 3 columns, and I use the middle colum to setup the entire site.

Now, I'm using what we could call layers or positioning boxes, and all the coordinates are related to the left or top of the page, making it impossible (to my eyes) to centralize it. I'm pretty sure there is something I'm not seeing. Probably the positioning been relative or something.

Here is the code I'm using on my css file to be used by the divs.

#hh_Header {
position:absolute;
left:33px;
top:14px;
width:780px;
height:125px;
z-index:1;
}

goes on for every other positioning divs i use, but I think u guys can get the idea.

So, is the a way to have this div always on the middle of the screen no matter the resolution?

Thanks in advance for any help

[PoohBear88]

It's usually best to put a "wrapping" around your site's containers.

#wrap
{
color:inherit;
width:780px;
margin-top: -10px;
margin:auto;
padding:5px;
}

<div id="wrap" align="center">

<div id="header">
<div id="content">
<div id="footer">

</div>

[Tiruak]

Ok, I don't think I actually got it to work. A few questions:

How do I position the other div's, relative to the "wrap" div?
With the "align=center", wont it make all text to be centralized as well?

Thanks in advance

[Tiruak]

Edit: Reading again my question, I realize I'm not making my self very clear. I will try to explain more precisely what I'm trying to achieve.

I have this setup for the page that goes like the following:

Header div (780px)
Header nav div (780px)
Left column nav div (150px)
center column content div (500px)
Right column nav div (130px)
Footer div (780px)

======================================= 
¦          Header Div (780)           ¦ 
======================================= 
¦        Header Nav Div (780)         ¦ 
======================================= 
¦       ¦                     ¦       ¦ 
¦   L   ¦          C          ¦   R   ¦ 
¦   E   ¦          E          ¦   I   ¦ 
¦   F   ¦          N          ¦   G   ¦ 
¦   T   ¦          T          ¦   H   ¦ 
¦       ¦          E          ¦   T   ¦ 
¦   D   ¦          R          ¦       ¦ 
¦   I   ¦                     ¦   D   ¦ 
¦   V   ¦          D          ¦   I   ¦ 
¦       ¦          I          ¦   V   ¦ 
¦       ¦          V          ¦       ¦ 
¦       ¦                     ¦       ¦ 
======================================= 
¦            Footer Div (780)         ¦ 
=======================================

(cant use spaces to make it look like real =/ )

So, it's ok to align using the margin:auto the full row divs, but I need to precisely position the 3 columns, and still keep them centralized. That would be very easy using tables, but thats what I'm trying to avoid. I want to have it all in css.

Thanks in advance any help

[edited by: Tiruak at 5:58 pm (utc) on July 19, 2007]

[edited by: DrDoc at 6:16 pm (utc) on July 19, 2007]
[edit reason] fixed page layout example :) [/edit]

[Xapti]

okay first of all there's two ways to get content centered horizontally on the viewport... one: you can absolutely position your wrapper (which goes around everything) left:50%, and margin-left:negative half the width
That isn't really used, since what you can do is just margin:0, auto

Other than that... all your really asking for seems to be a simple 3 column layout, right? There's all sorts of imformation on that stuff on this website, and everywhere else on the internet. Just search for "3 column layout"

Table based designers converting to CSS typically try using position:absolute lots. This is not a good habit to do, and should only be used when necessary.
An easy way to get a 3 column layout is to use floats. Float the two shortest columns and set their height to 100% (best make sure the container of the 3 columns has position:relative to establish container block), and assign all 3 their width.

There are also more complicated methods, such as ones which allow any column to be the highest.

[edited by: Xapti at 8:20 pm (utc) on July 19, 2007]

[Tiruak]

I appreciate you pointing me to the right direction.
I will look into the floats and see if I can learn how to do using it. I was almost giving up on the css layout and going back to use tables again.

thanks a bunch