I read the Sticky under CSS Forum on How to Center a Web Page and went to all the websites it recommended, but still cannot figure it out. I have Googled and read and read and read for the past 3 days and still cannot figure this out.

Here is my webpage not centered

www.usmcmudrun.net/test.html

Here is my webpage centered

www.usmcmudrun.net/testcentered.html

When I center it, it goes very very wide.

I have tried to adjust margins, change codes, change positions.

Can anyone please tell me what I am doing wrong. It seems that there must be a simple solution, but obviously not. I have tried to copy the code and then go back and paste one at a time and still cannot figure it out.

Thank you

Robin

Both pages look the same to me. Are you trying to center everything on the page? Or something specific. (did you try setting the width/position in CSS?)

Have you set a width? and are you using margin:0 auto;

I have tried everything I thought. Tried setting a width and tried setting margin to 0. Maybe I set the width and margin in the wrong place. Not sure. Just know I can't get it to work. When I try to put the code to center it, it goes very wide.

Robin

Originally Posted by Lpspider

Are you trying to center everything on the page? Or something specific.

Well? I'd like to help you, but I'm not sure what you're trying to center.

Your first problem is that you have EVERYTHING set to position:absolute. Definitely NOT the way to go. It's better to use the normal document flow and position only where needed.

The 'stretching' problem appears to only occur in IE6.
You have a width: 100% on at least 1 of the divs.. so it's going to go to 100%, just like you told it. If you want a set width centered, then define something other than 100%.

You have an image in there that's 1400px wide !

Lots of issues going on there.

also not, margin:0

no no no, that just means it will go right up to the corner of the page.

should be
margin: 0 auto;

the key being auto.

margin:0 auto; means that it will match up to the top of the page, and center horizontally.

As stated before (LadynRed), your div is 100% is width. How can you center something as wide as the page?

Okay. I decided to start over. LadynRed was partly right.

Part of my problem was that my header image was 1400 pixels wide so I resized it and am starting form scratch.

This is what I was trying to achieve--a web page centered on a background so you would not have to scroll to the right to view it on some computers.

www.usmcmudrun.net/test1.html

I wanted an easy fix, but that wasn't happening--lol.

Thanks

Robin

Just a question, why is the image 1031 pixels high, couldn't you just crop it? seeming as the bottom half is just white

I did do that actually and then changed it because my background is the gradient two colors.

Robin

I also notice that you're taking an unusual approach to centering.

That's because I am what they call a "newbie"--LOL.

I did the website on Tuesday and Wednesday. Everything was fine on my laptop. When someone else looked at it on their computer, they said they had to scroll to the right. So then I decided to do a background and center it.

That's when I started having problems. Everything was fine until then.

Then when I couldn't figure out a simple solution, I started over a little while ago.

Robin

I did do that actually and then changed it because my background is the gradient two colors.

Well, there's a method for having your gradient background AND your white background for your content .
- you put the gradient in as a background for the body in your CSS
- you create a 'wrapper' or 'container' div, and give it a white background color, giving it a width so you can center it with margin: 0 auto.
- you then create a 'header' div to hold just the top image you want for your header.
This is all done without any absolute positioning too

Did you tried "div" tag? <div align ="center" ....?

<div align ="center" .

And that would be the WRONG way to center something !

Its alright to center small text, but even then you could set a class with text-align:center;

margin: 0 auto; like I said before, sets no margin at the top and bottom, and equal amounts for the left and right, which then HAS to be centered. But if there's no width set, hows your browser going to know what the equal amount should be?

Have you tried just adding:

margin-right: auto;
margin-left: auto;

That should work fine.

Matt

thats the same as margin:0 auto; just a longer version

Try removing this line of code in your HTML:

<div style="Z-INDEX: 100; POSITION: absolute">

Matt

Don't forget to remove the matching </div> though. Could cause real problems.