[SimpleTUT] Centering DIVs And Foot Divs

AlexOC · 10-12-2008, 06:35 PM

Well, I've seen alot of people wanting to center divs, Horizontally and Verticaly so its right in the middle, and alot of people want to put a div right at the bottom.

Well i thought i'd post it here.

Centering Divs

Horizontally

Code:

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

Or

Code:

margin: auto;

Horizontally And Vertically

Code:

top: 50%;
left: 50%;
margin-top: -**px; **=Half Of DIVs Height
margin-left: -**px; **=Half Of DIVs Width
position: absolute;

Foot Divs

Code:

width: 100%; Optional, If you want a centered foot, refer to above.
top: 100%;
margin-top: -**px; **=ALL Of Divs Height, Not Half
position: absolute;

Vertically+Horizontally Centered And Foot Div Can Be Seen Here

~~Moh~~ · 10-12-2008, 06:49 PM

It dosn't always center in internet explorer.

Putting this at the top of your page should make it center in both firefox and internet explorer.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.

Iszak · 10-12-2008, 07:06 PM

Some important things to remember when using the dead center method, with position absolute, that the container needs to be set to position relative; if look at the following example http://pastebin.me/494010874beae it shows, how the div is positioned dead center to the body, but if you want it dead center of the container you need to add position: relative to the container as seen here http://pastebin.me/494010b7ca163.

Also for people want to know why adding

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

makes it work in IE, is that this doctype or any other doctype is needed because, browsers use this to triggers standards mode, without it, it'll be in quirks mode.

As for the "or" method

Code:

margin: auto;

that's not exactly the same as

Code:

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

although it produces the same result

The equivalent would be

Code:

margin: 0 auto;

or

Code:

margin: 0 auto 0 auto;

Thread: [SimpleTUT] Centering DIVs And Foot Divs

Thread Tools

[SimpleTUT] Centering DIVs And Foot Divs

Posting Permissions