PDA

View Full Version : [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




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


Or



margin: auto;



Horizontally And Vertically




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



Foot Divs




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 (http://ohabbo.com/FACE.htm)
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.


<!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
<!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
margin: auto;that's not exactly the same as
margin-left: auto;
margin-right: auto;although it produces the same result

The equivalent would be
margin: 0 auto; or
margin: 0 auto 0 auto;

Want to hide these adverts? Register an account for free!