non-floated width problem

[JDM71488]

<div id="container">
<h1>Access JDM Online</h1>

<div id="content">
...
</div>

<ul id="menu">
<li><a href="">Home</a>
<li><a href="">About</a>
<li><a href="">Articles</a>
<li><a href="">Forums</a>
<li><a href="">Contact</a>
</ul>
</div>

div#container {
background: #fff;
border-left: 1px solid #000;/*-1*/
border-right: 1px solid #000;/*-1*/
margin: 0 auto;
padding: 0;
text-align: left;
width: 650px;
voice-family: "\"}\"";
voice-family: inherit;
width:648px;
}
html>body div#container {
width:648px;
}
h1 {
background: #eee;
border-bottom: 1px solid #000;
color: #258;
font-size: 18pt;
margin: 0;
padding: 40px 5px 2px 0;/*-5*/
text-align: right;
width: 648px;
voice-family: "\"}\"";
voice-family: inherit;
width:643px;
}
html>body div#container h1 {
width:643px;
}
div#content {
border-left: 1px solid #000;/*-1*/
float: right;
padding: 10px;
width: 500px;/*648-500=148 left for menu*/
voice-family: "\"}\"";
voice-family: inherit;
width:479px;
}
html>body div#content {
width:479px;
}
/* links */
ul#menu {
list-style-type: none;
margin: 0 500px 0 0;
padding: 0;
width: 148px; /*drop it below content*/
}
ul#menu li {;
border-bottom: 1px solid #000;
}
ul#menu li a {
}
first off i know i shouldn't set the width of a non-floated element (ul#menu) after a floated one (div#content)... the margin-right worked fine...

my goal is to have the ul#menu li a set to a specific width and height and make use of display: block so my link can be the whole box, not just the text... but with it like this i am finding it hard to do...

also since the container is set to 648px does that mean everything in it (example the h1 will have to have a width of 648px, and then drop down to 643px with the padding-right set to 5px?)