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;
}