I have a problem with setting up my menu for a website. The whole website is centrated whith margin: auto. By some reason the menu does not centrate because it's a div that contain links, the buttons. Each button link has a background image. This is because the images for the buttons are 315px wide and include the overlay images. For example, when the user holds over this image the image moves 105px to the left and shows the mouseover option. (View code)This is the .html: (don't mind the id names for the buttons, didn't feel like changing 
and yes I'm swedish)\[code\] <body> <!--Banner--> <img src="http://stackoverflow.com/header/picture.png" /> <img src="http://stackoverflow.com/header/banner.png" /> <!--Pre-loads the images for menu--> <img src="http://stackoverflow.com/header/start.png" style="display: none;" /> <img src="http://stackoverflow.com/header/bestall.png" style="display: none;" /> <img src="http://stackoverflow.com/header/priser.png" style="display: none;" /> <img src="http://stackoverflow.com/header/omoss.png" style="display: none;" /> <img src="http://stackoverflow.com/header/support.png" style="display: none;" /> <img src="http://stackoverflow.com/header/filarkiv.png" style="display: none;" /> <!--Menu--> <div id="menu"> <a href="http://stackoverflow.com/questions/11455064/index.php" id="startknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="priserknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="bestallknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="omossknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="supportknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="filarkivknapp"></a> <img src="http://stackoverflow.com/header/box.png" id="box" /> </div> <div id="content"> <p>Hi!</p> <p>This is one paragraph</p> <p>And this is another.</p> </div> </body>\[/code\]And this is how I have set up the buttons in the css for the menu:\[code\] /*Startknappen*/ #startknapp { position: absolute; left: 0px; width: 105px; height: 35px; text-decoration: none; background-image:url(start.png); } #startknapp:hover { background-position: -105px 0; } #startknapp:active { text-decoration: none; } /*Priserknappen*/ #priserknapp { position: absolute; left: 105px; width: 105px; height: 35px; text-decoration: none; background-image:url(priser.png); } #priserknapp:hover { background-position: -105px 0; } #priserknapp:active { text-decoration: none; } ... and so on for the other buttons...\[/code\]Here is some of the .css:\[code\] #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width: 800px; height: 800px; margin: auto; } #menu { height: 35px; width: 800px; } #content { position: absolute; width: 800px; background-color: ; }\[/code\]The problem now is that, as written above, the menu won't centrate. However when I do position: absolute; for #menu it does centrate. Only problem is that content then overlaps the menu, and I don't want that. I want content to start 0px after the bottom of menu. Here are some images of how it looks:Won't centrate: http://imageshack.us/photo/my-images/15/leftra.pngPosition: Absolute:http://imageshack.us/photo/my-images/443/centerh.pngHope someone can help me get this right. Thanks in advance
and yes I'm swedish)\[code\] <body> <!--Banner--> <img src="http://stackoverflow.com/header/picture.png" /> <img src="http://stackoverflow.com/header/banner.png" /> <!--Pre-loads the images for menu--> <img src="http://stackoverflow.com/header/start.png" style="display: none;" /> <img src="http://stackoverflow.com/header/bestall.png" style="display: none;" /> <img src="http://stackoverflow.com/header/priser.png" style="display: none;" /> <img src="http://stackoverflow.com/header/omoss.png" style="display: none;" /> <img src="http://stackoverflow.com/header/support.png" style="display: none;" /> <img src="http://stackoverflow.com/header/filarkiv.png" style="display: none;" /> <!--Menu--> <div id="menu"> <a href="http://stackoverflow.com/questions/11455064/index.php" id="startknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="priserknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="bestallknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="omossknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="supportknapp"></a> <a href="http://stackoverflow.com/questions/11455064/index.php" id="filarkivknapp"></a> <img src="http://stackoverflow.com/header/box.png" id="box" /> </div> <div id="content"> <p>Hi!</p> <p>This is one paragraph</p> <p>And this is another.</p> </div> </body>\[/code\]And this is how I have set up the buttons in the css for the menu:\[code\] /*Startknappen*/ #startknapp { position: absolute; left: 0px; width: 105px; height: 35px; text-decoration: none; background-image:url(start.png); } #startknapp:hover { background-position: -105px 0; } #startknapp:active { text-decoration: none; } /*Priserknappen*/ #priserknapp { position: absolute; left: 105px; width: 105px; height: 35px; text-decoration: none; background-image:url(priser.png); } #priserknapp:hover { background-position: -105px 0; } #priserknapp:active { text-decoration: none; } ... and so on for the other buttons...\[/code\]Here is some of the .css:\[code\] #html, body { top: 0px; right: 0px; bottom: 0px; left: 0px; width: 800px; height: 800px; margin: auto; } #menu { height: 35px; width: 800px; } #content { position: absolute; width: 800px; background-color: ; }\[/code\]The problem now is that, as written above, the menu won't centrate. However when I do position: absolute; for #menu it does centrate. Only problem is that content then overlaps the menu, and I don't want that. I want content to start 0px after the bottom of menu. Here are some images of how it looks:Won't centrate: http://imageshack.us/photo/my-images/15/leftra.pngPosition: Absolute:http://imageshack.us/photo/my-images/443/centerh.pngHope someone can help me get this right. Thanks in advance