I need to position my navbar within a div - html

Question

I've tried everything from text-align to setting margins. I want the nav bar to be centered horizontally and at the bottom of the div vertically.
html: http://www.joekellywebdesign.com/businesssample/index.html
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="projects.html">Projects</a>
<ul>
<li>Restaurant</li>
<li>House</li>
<li>Mall</li>
</ul>
</li>
<li>About</li>
<li><a class="MenuBarItemSubmenu" href="services.html">Services</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="residential.html">Residential</a>
<ul>
<li>Housing</li>
<li>Storage</li>
</ul>
</li>
<li>Business</li>
<li>Government</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
css: http://www.joekellywebdesign.com/businesssample/css/styles.css
/* CSS Document */
* {
margin:0px;
padding:0px;
}
body {
background-color:#FF0;
}
#wrapper {
width:900px;
margin:10px auto;
background-color:#FFF;
}
#logo {
float:left;
width:200px;
background-color:#FFF;
}
#navbar {
float:right;
text-align:center;
width:700px;
margin: auto;
background-color:#FFF;
}

Answer 1

You could do something like this:
<style type="text/css">
div#container {
position:relative;
width: 500px;
height: 300px;
border: 1px solid black;
}
div#menu-container {
position: absolute;
bottom: 0;
width: 100%;
}
div#menu {
position: relative;
text-align: center;
}
</style>
<div id="container">
<div id="menu-container">
<div id="menu">
Hello World!
</div>
</div>
</div>
Check out this jsFiddle for a demonstration.

Answer 2

Using an absolute position would easily get it to the bottom:
You'd apply this to the #navbar: position: absolute; bottom: 0px;
Then you'd apply this to the parent: position: relative;
However, now that you've applied an absolute position, you should use a similar technique to center it horizontally. Since your navbar is 700px, we can use some math to center it using the same absolute position.
You'd apply this to the #navbar: left: 50%; margin-left: -350px;
Working example: http://jsfiddle.net/ky9av/

Answer 3

You can try this.
ul.MenuBarHorizontal {
margin-top: 8%;
float: right;
}

Answer 4

You can try with this,
ul.MenuBarHorizontal {
cursor: default;
font-size: 100%;
list-style-type: none;
margin: auto;
padding: 0;
width: 512px;
}
Secondly, as per your design, the navbar ends exactly where you ul ends,
so you might try this
#navbar {
background-color: #FFFFFF;
float: right;
margin: auto;
margin-top: 49px;
text-align: center;
width: 700px;
}