Center Website with Div Tag

[julesbuiltit]

Hi, I am unable to center the container div. I am new to CSS and would appreciate the help.
Right now the website is shifted to the far lefft in most resolutions.

}
#apDiv7 {
position:absolute;
width:832px;
height:529px;
z-index:6;
left: 93px;
top: 27px;
background-image: url(align.jpg);
overflow: visible;
visibility: visible;
}

[Chris Coyier]

Create a centering reset. Copy this entire code and paste in the top of your CSS file.

* {margin: 0 auto; padding: 0;}

[TT_Mark]

Please don’t create a centering reset…. that is not a good idea!

You want to remove the top, left and position attributes of the container div and set the margin to

margin: 0 auto

[Chris Coyier]

Why is creating a reset a bad idea? Tons of people use them including Chris Coyier and Elliot Jay Stocks.

Edit: Actually, you’re right as it may throw off the rest of his design. However, if he used a reset in the beginning, he most likely wouldn’t have this issue.

[jamygolden]

@CWDESIGN * {margin: 0 auto; padding: 0;} isn’t a very common reset, * {margin: 0; padding: 0;} is however.

[Chris Coyier]

@jamy-za, but it works.

[noahgelman]

A centering reset usually isn’t good.

[knis_abdelhakim85]

try to remove he absolute positionning and top and left attribute, then make the margin: 0 auto.That should fix your problem and for IE add this for the body {text-align:center} and the container div add this {text-align:left}.
Let us know if works for you

[TT_Mark]

Firstly, a centering reset is a terrible idea when all the original poster wanted was to center one div. It makes no sense to go and center everything when all they asked for was the container to be centered!

Also, with regards to the above poster, you do not need any text-align for IE unless you are actually wanting to center the text within the div rather than just center the div on the page

[Chris Coyier]

Lol everyone is so high strung on these forums. Chill. Wouldn’t it be easier if we just had a link in the first place? Maybe my suggestion wasn’t a good idea in the short run but would save a lot of time in the future and there’s nothing wrong with a center reset

[TT_Mark]

I’m not highly strung, I’m just here to try and prevent people from giving out poor advice.

A centering reset is not a good idea and would also not save a lot of time in the future unless you actually wanted to center every single element on your site. Having a regular reset, as @jamy_za pointed out, is not a problem (although there are also arguments for why these are bad…but that is another discussion!) but the command

* { margin: 0 auto }

centers everything, including divs within their parent div, paragraphs, images etc etc. If you wanted to center every element within its parent (or have the majority of elements like this), then sure, use a centering reset, but I highly doubt many people would and it would therefore be quicker (both coding and for the browser to actually parse the information) if you just centered the few elements that needed centering

[Chris Coyier]

You’re absolutely right.

[rickylamerz]

What I would do to center a Div absolutely is:

#divselector {margin:0px auto; width:800px;}

And if for some reason that doesn’t work. You could always try:

#divselector {position:absolute; left:50%; width:800px; margin-left:-400px;}

You absolutely position it in the center by giving in a negative margin of half the total width.

(I’m assuming in this example that the div is 800px wide)

[Author]

Posts