Problema maquetacion menu CSS

Master_0n3 #1 Mar '12

Hola, tengo un pequeño problema en la maquetación de una página.

Resulta que es una página que tiene una cabecera, cuerpo y pie vale?

El cuerpo debe estar hecho para que quepan 3 columnas, entonces una la tengo con float: left, otra con float: right y una sin nada para que se quede centrada. El problema viene cuando en la columna de la izquierda necesito poner un menú que crece cuando pinchas en un enlace, entonces salen las opciones de dicho enlace, pero se van tan abajo que traspasan el pie en vez de agrandar la altura de la página y ajustarlo.

Alguien sabe como puedo solucionar esto?

Adjunto codigo:

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="villadeleyva.css" />
    <script type="text/JavaScript" SRC="villa.js"></script>
    <title>Villa de Leyva</title>
</head>
<body>
    <div id="contenedor">
        <div id="cabecera">
            

    </div> <!-- cabecera -->
    
    <div id="contenido">
        <div id="menuhorizontal">
            <ul>
                <li><a href="#">Inicio</a></li>					
	    <li><a href="#">Fotos</a></li>
	    <li><a href="#">Contacto</a></li>
	</ul>	
        </div> <!-- menuhorizontal -->
        
        <div id="menuizq">
            <h3>Información</h3>	
	    <ul>
                    <li><a href="#" onclick="abrirMenu();">Historia</a></li>
                        <ul id="submenu">
			<li><a href="#">Submenu1</a></li>
			<li><a href="#">Submenu2</a></li>
			<li><a href="#">Submenu3</a></li>
			<li><a href="#">Submenu4</a></li>
			<li><a href="#">Submenu5</a></li>
			<li><a href="#">Submenu6</a></li>
		    </ul>
		<li><a href="#">Localizacion</a></li>
                    <li><a href="#">Gastronomia</a></li>
		<li><a href="#">Cultura</a></li>
		<li><a href="#">Museos</a></li>
		<li><a href="#">Eventos y Festivales</a></li>
	    </ul>
        </div> <!-- menuizq -->
        
        <div id="menuder">
            <h3>Lugares de Interés</h3>
	    <ul> 
		<li><a href="#">Desierto de Villa de leyva</a></li>
		<li><a href="#">Cascadas de la Periquera</a></li>
		<li><a href="#">Cañón Perdido</a></li>
		<li><a href="#">Laguna de Iguaque</a></li>
		<li><a href="#">Paso del Ángel</a></li>
		<li><a href="#">Hoyo de la Romera</a></li>
	    </ul>
        </div> <!-- menuder -->
        
        <div id="central">
            <div id="titulocentral">Una belleza natural</div>
            <div id="imagen"><img src="imagenes/0.jpg" id="ima"/></div>
        </div> <!-- info -->
    </div> <!-- contenido -->
    
    <div id="pie">
        
    </div> <!-- pie -->
</div> <!-- contenedor -->
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background: url('imagenes/fondo.png') #000 repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

h3 {
    font-size: 14px;
    margin-bottom: 10px;
}

#contenedor {
    width: 900px;
    margin: auto;
}

/* CABECERA */

#cabecera {
    width: 900px;
    height: 184px;
    background: url('imagenes/cabecera.png');
}

/* CONTENIDO */

#contenido {
    width: 900px;
    background: url('imagenes/contenido.png');
}
#menuhorizontal {
    width: 900px;
    height: 50px;
    line-height: 30px;
    font-size: 14px;
}
#menuhorizontal ul li {
    list-style: none;
    float: left;
    margin-left: 30px;
}
#menuhorizontal ul li a {
    text-decoration: none;
    color: #000;
}
#menuhorizontal ul li a:hover {
    text-decoration: underline;
    color: #FFF;
}
#menuizq {
    float:left;
    width: 200px;
    margin-left: 20px;
}
#menuizq ul li {
    list-style: none;
    width: 180px;
    height: 40px;
}
#menuizq ul li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    background: url('imagenes/menuu.png') no-repeat;
    width: 180px;
    height: 40px;
    padding: 12px 0 0 10px;
}
#menuizq ul li a:hover {
    text-decoration: underline;
    color: #FFF;
}
#submenu {
    display: none;
}
#menuder {
    float: right;
    width: 200px;
}
#menuder ul li {
    list-style: none;
    width: 180px;
    height: 40px;
}
#menuder ul li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    background: url('imagenes/menuu.png') no-repeat;
    width: 180px;
    height: 40px;
    padding: 12px 0 0 10px;
}
#menuder ul li a:hover {
    text-decoration: underline;
    color: #FFF;
}
#central {
    width: 480px;
    margin-left: 205px;
    margin-right: 205px;
}
#titulocentral {
    text-align: center;
    font-size: 36px;
    color: #000;
    margin-bottom: 20px;
}
#imagen {
    text-align: center;
}
/* PIE */

#pie {
    width: 900px;
    height: 117px;
    background: url('imagenes/pie.png');
}

Gracias de antemano