Tema: Overflow y height
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 03/12/2010, 09:56
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Overflow y height
Las estructuras que le indicaba eran para que le sirviesen de base y a partir de ellas.
Porque en el dibujo que mostró, su estructura no tiene pie ni cabeza, digo, footer and header :D

Tampoco indicaba si habrá situaciones de mayor contenido que hagan aparecer el scroll o si cada lateral llevaría un fondo distinto y por lo tanto habría que añadir una estructura de "falsas columnas" o "columnas equilibradas".

Bien, una variación del ejemplo que enlaza, con dos cajas flotadas, contemplando que puedan crecer en contenido y que éste no desborde por abajo al div padre de los flotados sería algo como:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <style type="text/css">
  7. * {margin:0; padding:0; outline: none; position: relative;}
  8. html, body {
  9.   height: 100%;
  10.   background: #000; /*sólo a efectos visuales*/
  11.   font-size: 1em;
  12. }
  13. #contenedor {
  14.   min-height: 100%;
  15.   height: auto !important;
  16.   height: 100%;
  17.   margin: 0 auto;
  18.   background: #EEDCB4;/*sólo a efectos visuales*/
  19.   width: 70%;/*sólo a efectos visuales*/
  20.   overflow:auto;
  21. }
  22. .izquierda {
  23.   float:left;
  24.   width: 30%;
  25.   margin: 10px 0 10px 5%;
  26. }
  27. .derecha {
  28.   float: left;
  29.   width: 55%;
  30.   margin: 10px 5%;
  31.   }
  32. a {
  33.   text-decoration: none;
  34.   color: #444;
  35. }
  36. a span {display: none;}
  37. a:focus span, a:active span {
  38. display: block;
  39. text-align: justify;
  40. color: #444;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45.   <div id="contenedor">
  46.       <div class="izquierda">
  47.           <p><a class="mas" href="#">Pulsa para añadir contenido y ver el comportamiento:<br /><span>Lorem ipsum dolor sit amet consectetuer ut Curabitur malesuada vel cursus. Ut ipsum Pellentesque a eget platea eget eget quam ac quis. At id ut condimentum risus vitae pharetra malesuada Ut eu pede. Sed lorem orci elit magna ut ante Curabitur Curabitur orci et. Et Pellentesque Morbi Quisque urna feugiat leo Vestibulum.<br />
  48.           Nam est Suspendisse wisi facilisi Curabitur Mauris turpis laoreet laoreet cursus. Et vitae quam et sed Curabitur ut pede ipsum vitae id. Et aliquet ac In dapibus sodales nec Fusce turpis eget hac. Fringilla pede Vestibulum Curabitur enim eu orci ac In vitae urna. Vel in laoreet Maecenas volutpat pretium congue parturient augue et libero. Quis.<br />
  49.           Enim fermentum sit augue In a ultrices scelerisque accumsan pede eget. Id sapien nec mauris metus sem in Aenean natoque urna semper. Hac libero condimentum Aenean odio justo montes dis pede orci libero. Ornare vitae Aenean In turpis Morbi dictum Morbi id semper Suspendisse. Urna pellentesque semper interdum rutrum consequat at Nulla dui malesuada metus. Nisl.</span></a></p>
  50.       </div>
  51.       <div class="derecha">
  52.           <p><a class="mas" href="#">Pulsa para añadir contenido y ver el comportamiento:<br /><span>Lorem ipsum dolor sit amet consectetuer ut Curabitur malesuada vel cursus. Ut ipsum Pellentesque a eget platea eget eget quam ac quis. At id ut condimentum risus vitae pharetra malesuada Ut eu pede. Sed lorem orci elit magna ut ante Curabitur Curabitur orci et. Et Pellentesque Morbi Quisque urna feugiat leo Vestibulum.
  53.           <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  54.           Lorem ipsum dolor sit amet consectetuer ut Curabitur malesuada vel cursus. Ut ipsum Pellentesque a eget platea eget eget quam ac quis. At id ut condimentum risus vitae pharetra malesuada Ut eu pede. Sed lorem orci elit magna ut ante Curabitur Curabitur orci et. Et Pellentesque Morbi Quisque urna feugiat leo Vestibulum.<br />
  55.           Enim fermentum sit augue In a ultrices scelerisque accumsan pede eget. Id sapien nec mauris metus sem in Aenean natoque urna semper. Hac libero condimentum Aenean odio justo montes dis pede orci libero. Ornare vitae Aenean In turpis Morbi dictum Morbi id semper Suspendisse. Urna pellentesque semper interdum rutrum consequat at Nulla dui malesuada metus. Nisl.</span></a></p>
  56.       </div>
  57.   </div>
  58. </body>
  59. </html>
Supongo que muy parecido a lo que ya ha llegado