Hola y agradeceros antes de nada que leáis este mensaje.
Vereis, tengo que hacer un menú algo fuera de lo normal, que por diferentes motivos he visto conveniente hacerlo con DIVS. Viendo las siguientes imágenes lo vais a ver más claro que con mi explicación:
MENU ACTUAL CON FALLO 
MENU BUENO 
Como veis, tengo un menú de 3 líneas.
La primera línea cuenta con 5 elementos (5 enlaces). El último elemento de esa primera línea, tiene que ocuparme en altura el total de las tres líneas de menu.
Es decir, mientras la primera línea de menu tiene 5 enlaces, las otras líneas del menú siguientes tienen 6 enlaces. Esto es así porque en la primera línea, el MENU 2 ocupa doble espacio horizontal.
El problema es precisamente ese, que si le doy altura a ese elemento, las siguientes líneas del menu se me van abajo, y no ocupan el espacio correspondiente que deberían de ocupar.
¿Tenéis idea de cómo solucionar este inconveniente?.
Muchas gracias y un saludo.
CÓDIGO FUENTE HTML
Código:
<html>
<body>
<div id="contenedor">
<div id="logo">LOGO</div><div id="texto-logo">DESCRIPCIÓN</div>
<div id="contenido-principal">
<div class="caja-acerca-de">MENU 1</div>
<div class="caja-doble-horizontal">MENU 2<br>SALTO DE LINEA</div>
<div class="cajas">MENU 3<BR>SALTO DE LINEA</div>
<div class="caja-contacto">MENU 4</div>
<div id="caja-menu-con-opciones">MENU CON OPCIONES:<br>-OPCION 1<br>-OPCION 2<br>-OPCION 3</div>
<div id="cajas-segunda-linea">
<div class="cajas">MENU 5</div>
<div class="cajas">MENU 6<br>SALTO DE LINEA</div>
<div class="cajas">MENU 7<br>SALTO DE LINEA</div>
<div class="cajas">MENU 8<br>SALTO DE LINEA</div>
<div class="cajas">MENU 9<br>SALTO DE LINEA</div>
</div>
<div id="cajas-tercera-linea"></div>
<div class="cajas">MENU 10</div>
<div class="cajas">MENU 11</div>
<div class="cajas">MENU 12<br>SALTO DE LINEA</div>
<div class="cajas">MENU 13</div>
<div class="cajas">MENU 14</div>
</div>
</div>
</body>
</html>
Código:
body {
behavior: url("csshover3.htc");
background: grey;
font-family: "arial";
font-size: 12px
}
#contenedor {
width:996px;
height:500px;
background: yellow;
border:solid
}
#logo {
float: left;
width:396px;
height:133px;
background: yellow;
}
#texto-logo {
float: left;
width:592px;
height:133px;
background: yellow;
}
#contenido-principal {
clear:both;
margin:0px;
padding:0px;
}
.cajas {
float:left;
width:166px;
height:40px;
background: white;
text-align: center;
margin:0 auto;
padding:0px;
}
.cajas:hover {
float:left;
width:166px;
height:40px;
background: blue;
text-align: center;
margin:0 auto;
padding:0px;
cursor: pointer;
}
.caja-acerca-de {
float:left;
width:166px;
height:32px;
background: white;
text-align: center;
padding-top:8px:
margin:0 auto;
padding-top:8px;
}
.caja-acerca-de:hover {
float:left;
width:166px;
height:32px;
background: blue;
text-align: center;
margin:0 auto;
padding-top:8px;
cursor: pointer;
}
.caja-contacto {
float:left;
width:166px;
height:32px;
background: white;
text-align: center;
padding-top:8px:
margin:0 auto;
padding-top:8px;
}
.caja-contacto:hover {
float:left;
width:166px;
height:32px;
background: blue;
text-align: center;
margin:0 auto;
padding-top:8px;
cursor: pointer;
}
#caja-menu-con-opciones {
float:left;
width:166px;
height:120px;
background: white;
text-align: center;
margin:0 auto;
padding:0px;
}
#caja-menu-con-opciones:hover {
float:left;
width:166px;
height:120px;
background: blue;
text-align: center;
margin:0 auto;
padding:0px;
cursor: pointer;
}
.caja-doble-horizontal {
float:left;
width:332px;
height:40px;
background: white;
text-align: center;
margin:0 auto;
}
.caja-doble-horizontal:hover {
float:left;
width:332px;
height:40px;
background: blue;
text-align: center;
margin:0 auto;
padding:0px;
cursor: pointer;
}
#cajas-segunda-linea{clear:both}
#cajas-tercera-linea{clear:both}