Float problem in basically anything but Safari.

Hello everyone!

I’ve searched for this, but I can’t seem to find any instance of someone else encountering this. I want to display a breadcrumb along the bottom of my menu bar aligned along the left and have my “Login/Register” links on the right (á la vanityfair.com). Problem is, it doesn’t want to display properly in any browser but Safari and Opera (that I know of). The breadcrumb looks fine but the “Login/Register” links seem to enjoy resting on the bottom of my <div>.

Here’s my site: TwoWordHeap.com

Here’s my code:

<div class="breadcrumb">
&nbsp;
		<span id="ui">Welcome to TwoWordHeap.com! <?php wp_register('', ''); ?> | <?php wp_loginout(); ?></span>

</div>

Now, because I use a plugin for my breadcrumb, I’ve avoided including that code. I’ve just used   as a placeholder.

Here’s my CSS:

.breadcrumb {
	border-bottom: 1px solid #3B3B2B;
	font-size: 0.8em;
	line-height:1.08em;
	padding: 4px 6px 4px 6px;
}

.breadcrumb #ui {
	float: right;
}

If anyone can help me correct this, it would be greatly appreciated. I’m still a noob when it comes to making a good website, so please be kind.

Thanks!

EDIT:
Be warned, I’m in the middle of updating my theme, so please ignore the lack of a third column. That’s going to be next, pending a meeting about it’s eventual content.