centering is driving me nuts!

I know, I know. This has been covered millions of times before but I can't get anything to work. I want my nav menu to sit in the middle at the bottom but I can't get it to do so. Here's the code:

#footer {
position: absolute;
height:40px;
bottom:0px;
margin-left: 300px;
margin-right: 300px;
}

<div id="footer">
<ul class="menu1">
<li><a href="http://www.freewebs.com/mykl/home test.html"><b>Home</b></a></li>
<li><a href="#nogo"><b>Biography</b></a></li>
<li><a href="#nogo"><b>Gallery</b></a></li>
<li><a href="#nogo"><b>links</b></a></li>
<li><a href="#nogo"><b>Music</b></a></li>
<li><a href="#nogo"><b>Concert Diary</b></a></li>
<li><a href="#nogo"><b>Contact Us</b></a></li>
</ul>
</div>

This is the best I've got so far but it's a compromise. I tried putting the margin on auto but it doesn't work. My header is in the middle (as it should be) and I didn't even tell it to go there!

Can you not put text-align:center; in the #footer ?

position absolute messes up centering.
Why are you using it anyway?

Code: Select all

body {
text-align: center;
}

#footer {
 margin: 0 auto;
 }

That should work.

Just remember to left align your text align somewhere else, like in your main div.

#footer {
position: absolute;
height:40px;
bottom:0px;
width: 50%;
margin-left: 301px;
margin-right: 301px;
text-align: center;
}

works the best so far. If I remove the position:absolute it messes everything else up, like puts the footer at the top and shoves everything over to the right so you can only see half of it! If anyone has ideas to fix these they will be most welcome!

I'm guessing you are using positon absolute for more than one element?

Hosting this somewhere would help see whats wrong. If you don't have a host try freewebs.com.

how does your page/layout looks like?
I am sure every elements in your page is position: absolute, thats what causes the problem.

If anyone wants a look here's the address:

http://www.freewebs.com/mykl/home%20test.html

Yes, everything is positioned absolutely - if I take it out everything goes crazy! How can I put a <div> top centre, bottom centre, left and right and smack in the centre of the screen without position: absolute?
The layout I have (above) is almost how I want it but I get the idea that there's a better way of doing this...

BTW the layout is my variation on this:

http://www.glish.com/css/7.asp

Well that tutorial isn't the best due to the fact that it asks you to absolute position everything. In fact, burn that tutorial!

Here are some tutorials on liquid layouts. So much better for all types of screen resolutions.
http://bonrouge.com/3c-hf-fluid-lc.php
http://www.pmob.co.uk/temp/3colfixedtest_4.htm

Hope this helps!