I am trying to update my coding from using tables for layout to CSS.
I am however running into one major obstacle.
The lack of center in CSS.
eg I want to create a header div with a graphic inside and simply center it.
I cant so I absolute position it but now I have to absolute position the middle and the footer.
Fine I can handle that but what do I do on pages where the middle section is longer than normal? Then the footer positioning is wrong !
Or do I have to sub break my middle into two sections
middle-mid & footer which I can poistion relatively.
Oh gosh I am all confussed !!!
I have read & re-read the book and in all the examples where the footer floats under the mid section no matter how long absolute positioning is not used!

Please help - does anyone know a better way of dealing with all this. Because right now I have had to put a table into my section div tag so that I can still center the contents which kind of defeats the object somewhat !

Regards & BTW Happy New Year
Tonya

Use auto margins...when you put both left and right margin as auto it centers the element.

Wow as easy as that ?
I will try it out tonight & report my results straight back!
Thanks for the tip. Fingers crossed !

Actually, not quite THAT easy. You need a couple of things to make a layout center and work in IE 6 and below as well as FF, Opera etc.

On your body element:
body{text-align: center} - that will center everything in IE. If you have a container div to hold your layout that has a specified width, it will then center that in IE.

Then, for those browsers that comply with auto margins, you'd need the following:

#container{
width: xxx px; (or em or %)
margin: 0 auto - zeros out top and bottom margins, and sets right and left to auto.
text-align: left; (resets your text alignment for everything inside #container).
}

There are several methods to make your footer stay below your longest content, I suggest you do some reading here:
http://www.themaninblue.com/writing/...ve/2005/08/29/

good luck !

Or you can read my post here http://www.webmaster-talk.com/html-f...xed-width.html

Hi guys ok. I tried it & couldn't get the result I wanted.
I have a header div that has a border, background colour & and a background graphic
I set margin left & right on auto & hey presto the graphic is center but the background colour and border are width of the screen and I want a set width.
The moment I set a width the whole thing jumps back to the left.
I have the text align center in the body as well as the header class that I have created.
I tried a small space - something like a single row in a table that you might use for a links / menu bar with a background colour and border. Tables easy just create table give it the right properties.
CSS - same problem. I want it 720 px wide but the moment I put a width in it jumps left !

Here is the CSS code for both classes
.header{
border: 1px solid #234;
background-color: #FDF5E6;
background-image:url(../graphics/banners/2007.jpg);
background-position:center;
background-repeat:no-repeat;
height:140px;
background-color:#FDF5E6;
margin-left;
margin-right;
text-align:center; width: 720px;}
.header-space {
height: 20px;
margin-left;
margin-right;
margin-top: 4px;}
border: 1px solid #234;
background-color:#FDF5E6;
width: 720px;}

Any answers appreciated. I know I can fix this with absolute positions but it means the footer has to go inside my mid-section so that I dont have to have either a seperate footer style sheet for each page or put the style locally so that the footer position can be adjusted accodring to the height of the mid section. Does that make sense?

btw where webmaster-talk has substituted cute little yellow pacmen inside cars should be the word - auto !!! LOL

LOL.. turn off the smilies in your post so it doesn't do that

CSS - same problem. I want it 720 px wide but the moment I put a width in it jumps left !

Solution to that problem: Wrap all your other <div>s inside a main "wrapper" div, then give IT the 720px width, margins: 0 auto; and position: relative. That will center the entire fixed width layout and the text-align center on the body will center it in IE.

LadynRed
once again you are my guru ! I am sure you have helped me out before as I remember the sign in and also seen and agreed with your comments in the Design Review area. Thankyou I will test it out tommorrow and let you know how I get on.

ta for the heads up on the smiles - it did not even occur to me. I have a teething 12 month old at the moment and my mind is often either elsewhere or simply knackered.

If it doesn't work, give us a link so we can see your code and tell you how to fix it.

It worked thanks guys now I have a whole load of new questions! But thanks for your help on this query. I have beautifully centered and completely table less layout - with floating columns !! Anyone wanting an example of easy code just mail me !!!