Foros del Web - Ver Mensaje Individual

kseso? · #14 (**permalink**) 22/10/2009, 08:51

Y además de la información de Mik, si el problema con ie es porque matiene el tamaño de la caja estando vacía y no permite el solapamiento, bastaría con retirar ese tamaño y que la anchura se la de un hijo (por ejemplo p). Sólo es cuestión de imaginación cuando se "juega" con css
Sin verificar en distintas situaciones, ni ajustar los detalles:

Código html:

Ver original<!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" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {font-size:99%; font-family:sans-serif; background:#333;}
 
#header {background:#521E39;}
 
#izquierda {float:left; padding-top:10px; background:#91D0D0; margin-right: 10px;}
#izquierda p { width:180px;}
#derecha {float:right; width:180px; padding:10px; background:#65684A; margin-left: 10px;}
 
#centro {background:#e0e0e0; padding-top:10px; overflow:hidden;}
 
#contenedor {overflow:hidden; background:#444; width:995px; margin: 0 auto;}
 
#izquierda, #centro, #derecha {padding-bottom:10000px; margin-bottom:-10000px;}
 
#footer {clear:both; background:#191919;}
 
.caja-top {padding:10px;}
.caja-top img {background:#FFFFFF; display:inline; float:left;}
h1 {font-size:3em; margin:0; padding:10px 0; color:#fff; font-family: monospace;}
h3 {font-size:1.8em; margin:0; padding:8px 0; font-family: serif;}
p {font-size:1em; line-height:1.5em; margin:0; padding:5px;}
#footer p, #header p, #derecha p {color:#fff;}
.monospace {font-family: monospace; font-size: 1.2em; background: #FF6600;}
.codigo {font-family: monospace; font-size:1em; letter-spacing: .1em; border: 1px solid #f5f5f5; color: #f5f5f5; background:#191919;}
</style>
</head>
 
<body>
        <div id="header">
            <div class="caja-top">
               <img src="http://www.forosdelweb.com/customavatars/avatar184738_14.gif" alt="un pequeña imagen de adorno" />
                <h1>- KSESO? Jugando con CSS -</h1>
                <p>Layout de tres columnas equilibradas, las laterales fijas y la central ocupando el resto de espacio. Si suprimes una de las laterales, su espacio es ocupado por la central.</p>
            </div>
        </div>
 
        <div id="contenedor">
            <div id="izquierda">
                    
                    <!--
                    <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
          -->
                </div>
            <div id="derecha">
                    <h3>Derecha</h3>
                    <p class="monospace">Puedes cambiar el valor de la anchura de las columnas laterales. <br/>
          Admiten valores en px, % o en em. Es indiferente.</p>
                    <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
          <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
            </div>
            <div id="centro">
                    <h3>Centro variable</h3>
                    <p>Esta caja ocupa el espacio restante que dejan las columnas laterales. Si se oculta una de ellas, se expande para rellenar el espacio liberado por ella.</p>
                    <p>Al utilizar el 'min-width' no hay colapsos. El scroll horizontal aparece en una resoluciones menor a 1.024px<br />
          Puedes incluir en #contenedor un 'max-width', y su equivalente para ie, para evitar problemas estéticos en pantallas de "cine"</p>
          <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
          <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
          <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
                <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
                </div>
        </div>
        <div id="footer">
            <div class="content">
                <p>Este layout no es 100% elaboración propia. Siento no haber dejado constancia del original en el que está basado.</p>
                <p>Tanto la cabecera como el pie pueden ser suprimidos. No influyen en el comportamiento de la caja central.</p>
            </div>
        </div>
</body>
</html>

Quita y pon el comentario de "#izquierda"