Menú sin espacios

[lfsow]

Tengo ahora un problema, y es que he hecho 2 menús, pero no respetan el espacio, y no se si se trata del CSS.

En esta imagen se puede apreciar:



La idea es que la barra de complementos y el menú queden por debajo del otro.

El código CSS es este:

Código:

/* Breadcrumb
-------------------------------------------------------------- */

.breadcrumb {
	background:url(../images/top_bar.png) left top no-repeat;
	width:920px;
	height:49px;
	padding:0px 20px;
	margin-bottom:20px;
	float:left;
}

.breadcrumb h3 {
	float:left;
	color:#e5e5e5;
	padding-top:15px;
}

.breadcrumb ul {
	float:right;
}

.breadcrumb li {
	display:inline;
}

.breadcrumb li a {
	display:block;
	float:left;
	padding:0px 2px;
	line-height:49px;
	font-size:11px;
	color:#e5e5e5;
}


.left_menu {
	width:170px;
	float:left;
}

.left_menu li a {
	font-size:18px;
	color:#231f20;
	padding:15px 20px 15px 20px;
	float:left;
	display:block;
	width:100%;
}

.left_menu li a:hover, .left_menu li a.selected {
	background:url(../images/bullet_selected.jpg) right center no-repeat;
}

.left_menu .blog li a:hover, .left_menu .blog li a.selected {
	background:transparent url(../images/divider.gif) repeat-x scroll left bottom;
}

.center_content {
	float:right;
	width:680px;
}

/* Breadcrumb 2
-------------------------------------------------------------- */

.breadcrumb2 {
	background:url(../images/barra.png) left top no-repeat;
	width:170px;
	height:49px;
	padding:0px 20px;
	margin-bottom:5px;
	float:left;
	
}

.breadcrumb2 h3 {
	float:left;
	color:#e5e5e5;
	padding-top:17px;
}

.breadcrumb2 ul {
	float:right;
}

.breadcrumb2 li {
    display:inline;
}

.breadcrumb2 li a {
	display:block;
	float:left;
	padding:0px 2px;
	line-height:4px;
	font-size:11px;
	color:#e5e5e5;
}


.left_menu {
	width:170px;
	float:left;
}

.left_menu li a {
	font-size:18px;
	color:#231f20;
	padding:15px 20px 15px 20px;
	float:left;
	display:block;
	width:100%;
}

.left_menu li a:hover, .left_menu li a.selected {
	background:url(../images/bullet_selected.jpg) right center no-repeat;
}

.left_menu .blog li a:hover, .left_menu .blog li a.selected {
	background:transparent url(../images/divider.gif) repeat-x scroll left bottom;
}

.center_content {
	float:right;
	width:680px;
}

Y el HTML este:

Código:

 <div class="content">
		
        <div class="breadcrumb">
        	
            <h3>Servicios</h3>
        
        </div>
        
        <!--Begin left menu -->
        
        <div class="left_menu">
        	<ul>
            	<li><a class="selected" href="#dweb">Web</a></li>
                <li><a href="#folletos">Folletos/Carteles</a></li>
                <li><a href="#logos">Logos</a></li>
                <li><a href="#publicidad">Publicidad</a></li>
            </ul>
		</div>
		
		<div class="breadcrumb2">
		
        <h3>Complementos</h3>	
		   
		</div>
		
		<div class="left_menu">
		<ul>
               <li><a href="#web">Mantenimiento</a></li>
               <li><a href="#olletos">Publicidad</a></li>
               <li><a href="#loos">Otros</a></li>
			   </ul>
        </div>

Muchísimas gracias de antemano y espero ayuda.

[charlyalegret]

Hola, y si dejas todo el menú dentro del mismo div left_menu? otra cosa es que de esta manera vuelvas a ver los dichosos puntos...