Tema: Problema con contenedor
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/11/2010, 22:03
cesarms89
 
Fecha de Ingreso: julio-2010
Mensajes: 13
Antigüedad: 13 años, 9 meses
Puntos: 0
Problema con contenedor
Saludos a todos, Hice esta pagina pero el contenido de la etiqueta "flog" no cabe totalmente en el "contenedor", y el problema es que no le debo de dar un tamaño fijo ya que la pagina deve de variar de tamaño segun el contenido de una Base de Datos.

Este es mi codigo:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5.     <title>Mi Web</title>
  6.     <style type="text/css">
Código CSS: 
Ver original
  1. #contenedor{
  2.     border:1px solid #000;
  3.     width:980px;
  4.     min-height:600px;
  5.     height:700px !important;
  6.     margin:auto;
  7. }
  8. #header{
  9.     background:#1C4C7D;
  10.     width:100%;
  11.     height:10%;
  12.     margin:auto;
  13. }
  14. #links, #amigos{
  15.     background:#dfdfdf;
  16.     width:14%;
  17.     height:85%;
  18.     padding:2.1%;
  19. }
  20. #links{float:left;}
  21. #amigos{float:right;}
  22. .flog{
  23.     position: relative;
  24.     background:#f8f8f8;
  25.     width:60%;
  26.     height:auto;
  27.     margin:5px auto;
  28.     padding:10px;
  29.     color:#000;
  30.     border:1px solid #e0e0e0;
  31. }
Código HTML: 
Ver original
  1. </style>
  2. </head>
  3. <body>
  4.     <div id="contenedor">
  5.         <div id="header"></div>
  6.         <div id="links">Links</div>
  7.         <div id="amigos">Amigos</div>
  8.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  9.         <div class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</div>
  10.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  11.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  12.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  13.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  14.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  15.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  16.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  17.         <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
  18.         <div class="flog">Pellentesque neque neque, egestas ut pellentesque id, convallis in nisl. Praesent egestas ipsum ut turpis bibendum eget mollis metus tristique. In lacus est, porta vitae feugiat quis, semper sit amet nisl. Suspendisse mattis mauris non sapien iaculis quis mollis turpis aliquet. Suspendisse potenti. Fusce ultrices, mauris vel bibendum pulvinar, enim urna consectetur ante, sed dictum risus justo ut lorem. Mauris commodo arcu at erat dictum in vehicula mauris hendrerit. Sed orci magna, molestie ut vestibulum a, adipiscing et enim. Duis posuere felis in magna scelerisque tempor. Ut porttitor adipiscing eleifend. Sed vulputate ante sed tellus posuere quis pharetra erat tempus.</div>    
  19.         </div>
  20. </body>
  21. </html>

y mi pagina se ve asi:


pero si le cambio el tamaño al contenedor para que sea variable.

Código CSS: 
Ver original
  1. #contenedor{
  2.             border:1px solid #000;
  3.             width:980px;
  4.             min-height:600px;
  5.             height:auto !important;
  6.             margin:auto;
  7.         }

se ve asi:


Como pueden ver la "flog" ya cabe dentro del "contenedor" pero el "header" desaparece, y "links" y "amigos" cambian de tamaño haciendoce muy pequeños y deberian de llegar al final del "contenedor".

No se que pueda ser, espero su ayuda y/o consejos.