Problema con Height y Capas anidadas

alaintm · #1 (**permalink**) 27/03/2008, 11:29

Estoy desarrollando una sitio pero no logro que el div de informacion se amplie y si la información es inferior se queda corto con respecto al div de secciones y la idea es que se quede al mismo alto o si la información es mayor se amplie, a continuación le agrego el código de la pagina y el estilo:

<!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="es" lang="es">

Código HTML:

<head>
  <title>Descubriendo Debian en la Ofimatica</title>
  <meta name="GENERATOR" content="Quanta Plus" />
  <meta name="AUTHOR" content="Proyecto Cepero" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="KEYWORDS" content="" />
  <meta name="DESCRIPTION" content="" />
  <link rel="shortcut icon" href="imagenes/favicon.ico" type="image/x-icon"  />
  <link rel="alternate" type="application/rss+xml" title="Descubriendo Debian en la Ofimatica" href="rss.xml" />
  <style type="text/css">
  /* <![CDATA[ */
  	@import "css/layout.css";
  /* ]]> */
  </style>
  <script type="text/javascript">
  /* <![CDATA[ */

  /* ]]> */
  </script>
</head>
<body>
<div id="margenes">
  <div id="superior">
    <div id="banner">
      <h1 class="oculto"><a href="index.html" title="Regresar a la página principal" accesskey="1">Descubriendo Debian en la Ofimatica</a></h1>
    </div>
  </div>
  <div id="medio">
    <div id="secciones">
      <h3>Secciones</h3>
      <ul class="seccion">
        <li class="reducido"><a href="openoffice.html">OpenOffice.org</a></li>
        <li class="reducido"><a href="OO-writer.html">OpenOffice.org Writer</a></li>
        <li class="reducido"><a href="OO-cal.html">OpenOffice.org Calc</a></li>
        <li class="reducido"><a href="OO-impress.html">OpenOffice.org Impress</a></li>
      </ul>
      <h3>Opciones</h3>
      <ul class="seccion">
        <li><a href="#">Imprimir Tema</a></li>
        <li><a href="#" title="Descargar la versión PDF del tema">Versión PDF</a></li>
      </ul>
      <h3>Otros Proyecto</h3>
      <ul class="seccion">
        <li><a href="#">descubriendo debian</a></li>
        <li><a href="#">descubriendo debian en el escritorio</a></li>
      </ul>
      <h3>Sitios de Interés</h3>
      <ul class="seccion">
        <li><a href="http://www.debian.org">Debian</a></li>
        <li><a href="#">OpenOffice.org</a></li>
      </ul>
    </div>
      <div id="contenido">
        <div class="borde-derecho">
        <div class="borde-izquierdo">
          <div id="ruta">
            <p>Inicio</p>
          </div>
          <div id="informacion">

        </div>
        </div>
        </div>
      </div>
  </div>
  <div id="pie">
    <p><a href="index.html">inicio</a> | <a href="contactenos.html">contáctenos</a> | <a href="terminos.html">términos de uso</a> | <a href="nosotros.html">nosotros</a> | <a href="mapa-sitio.html">mapa</a></p>
    <p><strong>Descubriendo Debian</strong>, es parte del Proyecto Cepero para el apoyo a la migración de los <acronym title="Institutos Politécnicos de Informática">IPI</acronym> hacia el software libre.</p>
    <p>el soporte de este proyecto se encuentra en los siguientes lenguajes y sistemas:</p>
    <p><a href="http://validator.w3.org/check/referer" title="Validar este proyecto en XHTML 1.0"><img src="imagenes/xhtml.png" alt="XHTML" width="80" height="15" /></a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validar este proyecto en CSS"><img src="imagenes/css.png" alt="CSS" width="80" height="15" /></a>
    <a href="http://www.php.net" title="Sitio oficial de PHP"><img src="imagenes/php.png" alt="PHP" width="80" height="15" /></a>
    <a href="http://www.mysql.com" title="Sitio oficial de MySQL"><img src="imagenes/mysql.png" alt="MySQL" width="80" height="15" /></a></p>
    <p>© Copyright 2007 - 2008. <a href="http://proyectocepero.ipichcb.rimed.cu">Proyecto Cepero</a></p>
  </div>
</div>
</body>
</html>

Código CSS

Código HTML:

@charset "UTF-8";


* {
    padding : 0;
    margin : 0;
  }


html, body {
    height: 100%;
    width : 100%;
    margin:0;
    padding:0;
  }


body {
    background : #979797;
    font-family : Verdana, Helvetica, Arial, sans-serif;
    font-size : 13px;
    color : #6B6B6B;
  }


h2 {
    font-size : 18px;
    margin : 0 0 15px 0;
  }


h3 {
    font-size : 16px;
    margin : 0 0 5px 0;
  }


p {
    margin : 0 0 10px 0;
    padding : 0;
    line-height : 1.5;
    text-align : justify;
  }


table {
    border : 1px solid #A0A0A0;
    text-align: left;
    border-collapse: collapse;
    font-size : 12px;
  }


thead {
    background-color : #C4C4C4;
    font-weight : bold;
  }


td, th {
    padding: 5px;
  }


th {
    text-align : center;
  }


tr, td {
    border : 1px solid #A0A0A0;
  }


img {
    border : none;
  }


a {
    text-decoration : none;
    border : 0;
  }


acronym {
    font-weight : bold;
    border-bottom : 1px dashed;
    cursor : help;
  }


#margenes {
    width : 100%;
    background : url(../imagenes/bkgd-body.jpg) top left repeat-x #f3f3f3;
  }


#superior {
    margin : 0;
    height : 88px;
  }


#banner {
    margin : 0 0 0 10px;
    height : 88px;
    background : url(../imagenes/banner.jpg) top left no-repeat;
  }


#medio {
    background-color : transparent;
    text-align : center;
  }


#secciones {
    float : left;
    width : 225px;
    padding : 50px 0px 0 10px;
    background-color : transparent;
    text-align : left;
  }


#secciones a {
    color : #49ac03;
    font-size : 12px;
  }


#secciones a:hover {
    color : #fff;
    background-color : #49ac03;
  }


ul.seccion {
    list-style: none;
    border: none;
    text-align:left;
    margin : 0;
  }


li.expandido {
    background: url(../imagenes/menu-expanded.gif) 0px 3px no-repeat;
    padding-left:17px;
    margin-bottom: 6px;
  }


li.reducido {
    background: url(../imagenes/menu-collapsed.gif) 0px 3px no-repeat;
    padding-left:17px;
    margin-bottom: 6px;
  }


li.tema, .extra {
    background: url(../imagenes/menu-leaf.gif) 0px 4px no-repeat;
    padding-left:17px;
    margin: 5px 0 6px 0;
  }


#contenido {
    width : auto;
    margin : 0 25px 0 245px;
    background : url(../imagenes/bkgd-content.jpg) #fff repeat-x;
    text-align : left;
    height : auto !important;
    height : 100%;
    min-height : 100%;
  }


#ruta {
    height : 25px;
    padding : 17px 20px 0 30px;
    background : transparent;
    font-size: 10px;
    color: #49ac03;
  }


#ruta a {
    color : #49ac03;
  }


#informacion {
    padding : 10px 40px 50px 40px;
    height : auto !important;
    height : 100%;
    min-height : 100%;
    background : transparent;
    font-size : 13px;
  }


#informacion ul, ol {
    margin : 10px 0 10px 20px;
    line-height : 1.5;
    font-size : 13px;
    text-align : justify;
  }


#informacion li {
    margin : 0 0 10px 0;
  }


#informacion li a {
    color : #49ac03;
  }


#informacion li a:hover {
    color : #fff;
    background-color : #49ac03;
  }


#informacion .subtemaactivo {
    background : url('../imagenes/tema_activo.png') no-repeat left center;
    padding-left : 20px;
    margin-left : -18px;
    list-style : none;
  }

#pie {
    clear : both;
    background: url(../imagenes/bkgd-foot.jpg) top center repeat-x #979797;
    padding : 75px 20px 15px 20px;
    color: #fff;
  }


#pie p {
    text-align : center;
  }


#pie a {
    color : #DBDBDB;
    font-weight : bold;
    text-decoration : underline;
  }


#pie a:hover {
    text-decoration : none;
  }


#opciones {
    list-style-type : none;
    margin : 0 auto 25px auto;
  }


#opciones li {
    text-align : left;
  }


#opciones ul {
    list-style-type : none;
    display : inline;
  }


#opciones ul li {
    display : inline;
    margin : 0;
  }


#opciones .opcion {
    font-size : 16px;
    font-weight : bold;
    text-align : right;
    display : inline;
    padding-right : 10px;
    text-align : right;
    width : 150px;
  }


.borde-derecho {
    margin-right : -10px;
    background : url(../imagenes/bkgd-content-right.jpg) top right no-repeat transparent;
  }


.borde-izquierdo {
    margin-left : -10px;
    background : url(../imagenes/bkgd-content-left.jpg) top left no-repeat transparent;
  }


.oculto {
    display : none;
  }


.clear {
    display : both;
  }