DIV won't show up over a DIV that's underneath it - css

Question

I can't figure out how to get a DIV to show up over a DIV that's underneath it. In other words, my webpage has a head, with a DIV that floats left and a DIV that floats right. Underneath that is a menu bar. I don't have many menu items, so I want image in the DIV that floats right to partially overlap the menu bar. I'm able to make it work with absolute positioning... but that not ideal. I went ahead and changed the width of the menu bar, but that's more of a temporary fix to get what I want. Thoughts?
www.sacspartans.org
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="header-left">
<hgroup>
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="http://sacspartans.org/wp-
content/uploads/2013/05/banner.png" alt="SacSpartans"
title="SacSpartans" border="0" />
</a>
</h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?>
</h2>
</hgroup>
</div>
<div id="header-right">
<img src="http://sacspartans.org/wp-
content/uploads/2013/05/california1.png" alt="MSU Alumni Club of
the Sacramento Valley" title="MSU Alumni Club of the Sacramento
Valley" border="0" />
</div>
<div id="navigation-bar">
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e(
'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to
content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary',
'menu_class' => 'nav-menu' ) ); ?>
</nav>
</div>
And now CSS info.
/* Header */
#header-left {
float: left;
}
#header-right {
float: right;
margin-top: 0;
}
#navigation-bar {
width: 575px;
}