Centering DIV Problem

xAdrianRonsten's Page
You see that everything is in middle of page except the navigation.
How do i change so the navigation is in middle of the page too?.
Here is a folder with the files im using in .txt form.
xAdrianRonsten's php files in TXT

Make sure it's not taking up the width of the parent container (generally it does). Resize it if necessary. Then just do:

Code:
<div style="width: x%; margin: 0px auto 0px auto;">...</div>

This will center it, where x is the percent of the width of the parent you wish the div to take up. Obviously 0px can be changed, or you can use CSS to do this as well (and you should).
 
To be more accurate, code
Code:
margin: 0 auto;
for margin is enough.

I'll explain why, what and how.

Setting up with XHTML 1.0 & CSS level 2.1 margin style we set pixels (*px) or percents (*%) when value is more than 0 for example
Code:
margin: 1px auto;
If we set 0 as value, we don't need to set px or %. That is valid CSS when in use with CSS Level 2.1.

Why do i set only two values in margin instead of four?
As was posted:
Code:
margin: 0px auto 0px auto;
four values is shortened version of:
Code:
margin-top: 0px;
margin-left: auto;
margin-bottom: 0px;
margin-right: auto;

I have set only two because if i set top and bottom values same (0px;) and same left and right (auto;) i can just set two values as shown above:
Code:
margin: 0 auto;
So it gives us auto values for both dimmensions (horizontal, vertical). And also we get rid of extra code. Not much, but still it's short and VALID.

Note, that if you set margin: 0 auto; it wont work on all DOCTYPES.

I hope i expressed it all clear. Have fun coding.
 
Last edited:
Back