| Sometimes something you think is going to be really | | | | < /html> |
| simple in web design can turn out to be a complete | | | | So now any content you have put inside the |
| nightmare! What's even worse is when you finally find | | | | #content div tag will be centred. A couple of things |
| that solution and it was really simple all along. This is | | | | to point out in the CSS are 1) in the #wrapper class |
| exactly the experience I had recently while trying to | | | | you will notice that I have set the width to 1000px, |
| centre a < div> tag horizontally using CSS. | | | | you should change this to suit the width of your |
| I've seen the question, "How do I centre a div | | | | content. This leads on to 2) in the #content class |
| horizontally?" asked many times in web design | | | | you will see that I have set the margin to -500. You |
| forums and never found anyone who seems to have | | | | should change this to minus half the width of your |
| solved the problem properly. Some come close and | | | | content. |
| others just plain don't work. Well here I believe I | | | | The way this works is reasonably simple. Let's go |
| have solved the problem fully. Here is the code, I'll | | | | through the #content class first. The "left: 50%;" will |
| explain how it works later: | | | | shift the #content div so that it starts halfway |
| In the CSS file insert the following code: | | | | across the browser window. Not much use by itself, |
| #wrapper {margin: 0 auto;width: 1000px; /* this is | | | | but "margin: -[half the width of your content];" then |
| how wide my content is */ | | | | shifts the #content div half the width of your |
| } | | | | content back towards the left hand side, or in other |
| #content {position: relative;left: 50%;margin: -500 /* | | | | words centres the div! |
| half the width of my content */ | | | | This is all well and good but if you resize your |
| } | | | | browser window you will notice that when your |
| Now in your html you need to layout your code | | | | browser window is no longer wider than your |
| something like this: | | | | content, your content starts to disappear off the left |
| < html> | | | | hand side of the screen! This is where the "position: |
| < head> | | | | relative;" comes in. If you put the #content div inside |
| < title>Insert Title | | | | another div, in this example the #wrapper div, and |
| < style type="text/css" media="screen">@import | | | | position it relative to that div then your #content div |
| url(../includes/layout.css);< /style> | | | | won't disappear off the left hand side of the screen. |
| < /head> | | | | You must however set the #wrapper class div to be |
| < body> | | | | the same width as your content: "width: [your |
| < div id="wrapper"> | | | | content width];". I have also set the margin to |
| < div id="content">Insert the content you want | | | | "margin: 0 auto;" so that the #wrapper div is placed |
| centred here< /div> | | | | where I want it. |
| < /div> | | | | I hope this helps you with centring you < div>'s and |
| < /body> | | | | saves you the time and frustration I went through! |