I have a header that contains two floated elements one left one right. I cannot seem to get the items floated right to align to the bottom of the element they are contained in.

I haven't looked at this on a pc but on my mac (safari & firefox) the two floated items act differently in each browser. In safari the float:right items displays in the upper right corner of header instead of the lower right. In firefox the float:right items run the whiole width of the header and are aligned to the bottom right of header (closer to what I want except for the fact that the black background runs across the whole header).

Here is the page I'm refering to

Any advise would be appreciated.

HTML:
Code:
<div id="wrapper1">
<div id="wrapper2">
	<div id="container">
  <div id="branding">
   <img src="images/common/logo.gif" alt="logo" width="302" height="54" />	
    <ul id="tabNav">
  	<li><a href="#">contact</a></li>
  	<li><a href="#">policies &amp; forms</a></li>
    </ul>
  </div><!-- end #header -->
</div>
</div>
CSS:
Code:
#wrapper1 {
	background: url(images/common/bkgRepeat.gif) repeat;
}
#wrapper2 {
	background: url(images/common/bkgStripeTile.gif) repeat-x;
}
}
#container { 
	width: 85%;  /* 85% this will create a container 85% of the browser width */
	margin: 0 auto; 
	text-align: left; 
	background-color: white;
	border-left: 1px solid #838383;
	border-bottom: 1px solid #838383;
	border-right: 1px solid #838383;
}
ul#tabNav{
	padding: 0px;
	margin: 0; /* eliminates space between divs */
	list-style-type: none;
	float: right;
}

ul#tabNav li {
	float: right;
	background-color: black;
	margin-left: 1em;
	line-height: 1.1em;

}

ul#tabNav a {
	float: right;
 	display: block; /*not sure this is needed*/
	padding: 0 0.5em;
	color: #dee8ed;
	text-decoration: none;
	text-transform: uppercase;
	font: 0.75em/2.2em Georgia, "Times New Roman", Times, serif;
}
ul#tabNav a:hover {
	text-decoration: none;
	background-color: #951810;
}
#branding { 
	width: 100%;
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	background-color: white;
}

#branding img {
	width: 302px;
	margin-left: 1.2em;
	float: left;
	display: block;
	margin-top: 45px;
	margin-bottom: 20px;
}