Perdonar mi desconocimiento, pero en el siguiente código, quiero que la zona amarilla , [EDITADO] perdón, la zona gris [/EDITADO] se extienda hasta el final para que recuadre todos los contenidos. (Firefox)
He probado a poner overflow:auto a DIV#cuerpo DIV.contenido, a DIV#contenido y a DIV#content, pero no lo consigo. Que estoy haciendo mal ??? Pd: Los colores lo he puesto para no tener que enviar las imgs de fondo CODIGO =========== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .hilite { color: #fff; background-color: #f93; } BODY { background-color:#fafafa ; padding: 15px; margin: 0px; text-align: center; color:#666; font: 11px/19px tahoma; } A, A:link, A:visited, A:active { color: #6984A0; } A:hover { color: #55606B; } DIV.both, BR.both { height: 0px; clear: both; font-size: 0px; line-height: 0px; font-family: arial; } FORM { padding: 0px; margin: 0px; } DIV#cabecera { background-color:#00FFFF; width: 760px; height:84px; margin-left: auto; margin-right: auto; padding-top:5px; /*0 IE*/ text-align: left; } DIV#cabecera DIV#logo { margin-left: 10px; margin-top:0px; /* 5 ie*/ width:200px } DIV#cabecera DIV#logo A, DIV#cabecera DIV#logo A:link, DIV#cabecera DIV#logo A:active, DIV#cabecera DIV#logo A:visited { display: block; width: 254px; height: 61px; } DIV#cabecera DIV#slogan { float: right; font: bold 12px/17px arial; color: #000066; text-align: right; margin-right: 5px; margin-top: 5px; } DIV#menusup { float: right; font: bold 10px arial; height:22px; color: #00002D; text-align: right; margin-right: 15px; margin-top: 30px; padding:0px 3px 0px 3px; text-transform:uppercase; } DIV#menusup .item ,DIV#menusup .item a, DIV#menusup .item a:link,DIV#menusup .item a:active,DIV#menusup .item a:visited{ text-decoration:none; color: #000066; height:22px; padding: 4px 1px 4px 1px; font: bold 10px arial; } DIV#menusup .item a:hover{ color: #000066; height:22px; text-decoration: none; padding: 4px 1px 4px 1px; } DIV#autores { background-color:#993366; margin-left: auto; margin-right: auto; width: 760px; margin-bottom: 15px; } DIV#autores DIV#contenido {padding: 20px; background-color:#993366; } DIV#aleatorio P A,DIV#presentacion P A, DIV#col3presentacion P A { color: #666; } DIV#aleatorio P A:hover,DIV#presentacion P A:hover, DIV#col3presentacion P A:hover { color: #999; } DIV#aleatorio H6, DIV#col3presentacion H6 { margin:0px 0px 0px 32px; font: bold 11px tahoma; color: #6984A0; } DIV#presentacion H6{ margin:0px 0px 0px 0px; font: bold 11px tahoma; color: #6984A0; } DIV#aleatorio H6 A, DIV#presentacion H6 A, DIV#col3presentacion H6 A { color: #6984A0; text-decoration: none; } DIV#aleatorio H6 A:hover, DIV#presentacion H6 A:hover, DIV#col3presentacion H6 A:hover { color: #6984A0; text-decoration: none; } DIV#aleatorio { font: 10px/15px arial; color: #666; width: 190px; height: 103px; text-align: left; padding-left: 50px; float: left; } DIV#aleatorio P { margin-left:32px;height: 20px; } DIV#presentacion { font: 11px/15px arial; color: #666; width: 437px; height: 103px; text-align: left; padding-left: 10px; float: left; border-left:1px dashed #CCCCCC; margin-left:10px; } DIV#col3presentacion { background: url(foto_c.jpg) no-repeat; font: 10px/15px arial; color: #666; width: 190px; height: 103px; text-align: left; padding-left: 50px; float: left; } DIV#buscador { background: url(fondo_busqueda.jpg) no-repeat 15px 0px; width: 760px; margin-left: auto; margin-right: auto; margin-bottom: 0px; text-align: left; } DIV#buscador INPUT { width: 130px; background: #FFF; padding: 1px; font: 9px/9px tahoma; color: #666; border: 1px solid #993300; margin-left: 80px; margin-top: 3px; } DIV#buscador INPUT.buscar { width: 50px; padding: 0px; background: transparent url(boton_enviar.jpg) no-repeat 3px 1px; border: 0px; margin-left: 0px; margin-bottom: 1px; } DIV#content { margin-left: auto; margin-right: auto; width: 760px; } DIV#cuerpo { background-color:#FFFF00; margin-right: 13px; width: 760px; margin-bottom: 20px; float: left; text-align: left; } DIV#cuerpo DIV.contenido {padding: 20px; background-color:#CCCCCC;} DIV.post { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #E5E5E5; } DIV.contenido H4 { color: #979588; font: bold 11px tahoma; } DIV.contenido H3 { margin-top: 5px; margin-bottom: 5px; } DIV.contenido H3 { background: url(icono_titular.gif) no-repeat center left; padding-bottom: 3px; padding-top: 3px; padding-left: 20px; } DIV.contenido H3 A, DIV.contenido H3 A:active, DIV.contenido H3 A:visited, DIV.contenido H3 A:active { text-decoration: none; font: bold 14px arial; text-transform: uppercase; color: #6984A0; } DIV.contenido H3 A:hover {color: #55606B;} DIV#cuerpo BLOCKQUOTE { font: italic 11px/18px tahoma; color: #838383; margin: 0px; margin-top: 15px; margin-bottom: 15px; padding: 10px 25px 10px 25px; } DIV#bottom { font: 10px/15px "Trebuchet MS"; width: 500px; margin-bottom: 10px; } DIV#bottom A { color: #55606B; font-style: italic; } DIV.directorioIzquierda { font: 11px/15px arial; color: #666; width: 25%; height: 103px; text-align: left; padding-left: 50px; float: left; } DIV.directorioCentro { font: 11px/15px arial; color: #666; width: 25%; height: 103px; text-align: left; padding-left: 50px; float: left; } DIV.directorioDerecha { font: 11px/15px arial; color: #666; width: 25%; height: 103px; text-align: left; padding-left: 50px; float: left; } DIV.directorioDerecha h1, DIV.directorioCentro h1, DIV.directorioIzquierda h1{ color: #6984A0; font: bold 12px tahoma; margin-top: 0px; margin-bottom: 5px; text-transform: uppercase; } DIV.directorioIzquierda A, DIV.directorioIzquierda A:link,DIV.directorioIzquierda A:active, DIV.directorioIzquierda A:visited,DIV.directorioCentro A, DIV.directorioCentro A:link,DIV.directorioCentro A:active, DIV.directorioCentro A:visited,DIV.directorioDerecha A, DIV.directorioDerecha A:link,DIV.directorioDerecha A:active, DIV.directorioDerecha A:visited{ text-decoration:none; } DIV.directorioIzquierda A:hover, DIV.directorioCentro A:hover, DIV.directorioDerecha A:hover{ color: #6984A0; } </style></head> <body> <div id="cabecera"> <div id="slogan"> dfghdfghdfghdfghdf ghdfg <div id="menusup"><span class="item"><a href="#">Ddfghio</a></span><span class="item"><a href="#">mdfghón</a></span><span class="item"><a href="#" class="item">D3456o</a></span><span class="item"><a href="#" class="item">Co5678a</a></span><span class="item"><a href="#">Hgm</a></span><span class="item"><a href="#">Mjjhp</a></span><span class="item"><a href="#">M5676il</a></span> </div> </div> <div id="logo"><a href="http://www.enfokes.com" title="Enfokes, soluciones digitales"></a> </div> </div> <div id="autores"> <div id="contenido"> <div id="aleatorio"> <h6><a href="#">Jgggost Vfghjfan fghjren</a></h6> <p>Pequeña descripción o introducción al autor. Continuaría en el <a href="#">quienes somos</a>…</p> </div> <div id="presentacion"> <h6>fghjfghjfghjalhhh</h6> <p>asdf asdf asdf asdf asdf asdf asdf asdfa sdf asdfa sdf fghjw asdf asdfa sdf asdfa sdf fghjw asdf asdfa sdf asdfa sdf fghjw asdf asdfa sdf asdfa sdf fghjw asdf asdfa sdf asdfa sdf fghjw asdf asdfa sdf asdfa sdf fghjw asdf asdfa sdf asdfa sdf fghjwlkejr asdlkfj poqiwefp asdlfj asñldfj poiwef asldkfj ñaslkdfjpoqiwejfalskdfj asdf asd fasdf asdf asdf asdf asdf </p> <!-- <div id="directorioIzquierda"> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 </div> <div id="directorioCentro"> categoria 7 categoria 8 <a href="#">categoria 9 </a>categoria 10 categoria 11 categoria 12 </div> <div id="directorioDerecha"> categoria 12 categoria 13 <a href="#">categoria 14 </a>categoria 15 categoria 16 categoria 17 </div> --> </div> <br class="both"> </div> </div> <div id="content"> <br class="both"> <div id="bottom"> </div> </div> <div id="content"> <div id="cuerpo"> <div class="contenido"> <h3><a href="http://www.accesibilidad.info/2005/04/09/nikochan/" rel="bookmark">f6878ct99or9io fgas </a></h3> <div class="directorioIzquierda"> <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 </div> <div class="directorioCentro"> <h1>asdfasdfasdfaf</h1> categoria 7 categoria 8 <a href="#">categoria 9 </a>categoria 10 categoria 11 categoria 12 <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 </div> <div class="directorioDerecha"> <h1>asdfasdfasdfaf</h1> categoria 12 categoria 13 <a href="#">categoria 14 </a>categoria 15 categoria 16 categoria 17 <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 <h1>asdfasdfasdfaf</h1> <a href="#">categoria 1 </a> categoria 2 categoria 3 categoria 4 categoria 5 categoria 6 </div> </div></div></div> <br class="both"> <div id="bottom"> Pie de página</div> </div> </body></html> -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.9.11 - Release Date: 14/04/2005 _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo -- No virus found in this incoming message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.9.11 - Release Date: 14/04/2005 -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.308 / Virus Database: 266.9.11 - Release Date: 14/04/2005 _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo