Problema con contenedor

cesarms89 · #1 (**permalink**) 06/11/2010, 22:03

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<!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>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Mi Web</title>
    <style type="text/css">

Código CSS:

Ver original#contenedor{
    border:1px solid #000;
    width:980px;
    min-height:600px;
    height:700px !important;
    margin:auto;
}
#header{
    background:#1C4C7D;
    width:100%;
    height:10%;
    margin:auto;
}
#links, #amigos{
    background:#dfdfdf;
    width:14%;
    height:85%;
    padding:2.1%;
}
#links{float:left;}
#amigos{float:right;}
.flog{
    position: relative;
    background:#f8f8f8;
    width:60%;
    height:auto;
    margin:5px auto;
    padding:10px;
    color:#000;
    border:1px solid #e0e0e0;
}

Código HTML:

Ver original</style>
</head>
<body>
    <div id="contenedor">
        <div id="header"></div>
        <div id="links">Links</div>
        <div id="amigos">Amigos</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <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>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <div class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</div>
        <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>    
        </div>
</body>
</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#contenedor{
            border:1px solid #000;
            width:980px;
            min-height:600px;
            height:auto !important;
            margin:auto;
        }

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.

PrendekZ · #2 (**permalink**) 06/11/2010, 22:28

quitale el valor de height, y colocale al contenedor:

Cita:

overflow:hidden;

Saludos!

cesarms89 · #3 (**permalink**) 06/11/2010, 22:56

si le quito el valor al height queda como la 2ª imagen, y si le pongo el:

overflow:hidden;

se corta al tamaño del contenedor y no se ve lo de abajo.

Paramericano · #4 (**permalink**) 07/11/2010, 12:49

Lo mejor que puedes hacer es meiténdole el valor "overflow:hidden" al div contenedor de las 3 columnas.

Pero esto en el fondo es el mítico problema de la altura de los divs, que no del todo configurable. Mira el post: "vivan los tables" dentro del directorio CSS de este foro.

cesarms89 · #5 (**permalink**) 07/11/2010, 16:02

ok, le echare un vistaso aver que tal.

cesarms89 · #6 (**permalink**) 07/11/2010, 18:31

Gracias a todos, Hice la pagina nuevamente siguiendo los consejos de Paramericano usando Tables y se ve muy bien, aqui les dejo el codigo.

Código HTML:

Ver original<!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>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Mi Web</title>
    <style type="text/css">
        #contenedor{
            border:1px solid #000;
            width:980px;
            height:auto;
            margin:auto;
        }
        #header{
            background:#1C4C7D;
            width:100%;
            height:150px;
            margin:auto;
        }
        .flog{
            background:#f8f8f8;
            width:94%;
            height:auto;
            margin:5px auto;
            padding:10px;
            color:#000;
            border:1px solid #e0e0e0;
        }
        .lados{
            background:#dfdfdf;
            width:18%;
            padding:2.1%;
        }
    </style>
</head>
<body>
    <div id="contenedor">
    <div id="header">
    </div>
    <table>
      <tr>
        <td class="lados" valign="top">Links
        </td>
        <td>
          <div>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p 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.</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p class="flog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non orci nec urna fringilla elementum bibendum a neque</p>
            <p 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.</p>    
          </div>
        </td>
        <td class="lados" valign="top">Amigos
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

Es una lastima que nadie sepa como se hace con CSS.

kseso? · #7 (**permalink**) 08/11/2010, 07:30

cesarms89:
¿Qué es exactamente lo que pretende conseguir?
¿Una estructura con:
.- Header
.- Cuerpo principal
---->Tres columnas de igual altura con independencia del contenido de cada una
?
Y ello sin importar si la anchura es fija, variable, adaptativa...
Voy a asumir que ese es su objetivo y en base a ello va mi respuesta.
Así que si no es ese, mis disculpas por no comprenderle.

Cita:

Iniciado por cesarms89

Es una lastima que nadie sepa como se hace con CSS.

No, más bien la lástima es que no lo haya sabido encontrar o que no le hayan sabido encaminar a hallarlo:
www.araudi.net
http://matthewjamestaylor.com/
http://css.devillasbuenas.es
http://www.cssplay.co.uk/
...

Eso sin hacer una simple búsqueda aquí en el foro, que es un tema repetido hasta la saciedad.

Columnas equilibradas, falsas columnas, equal height columns... son muy variadas las cadenas de texto para hacer una búsqueda y encontrar aquel ejemplo y su técnica que mejor se adapte a su necesidad.

kseso? · #8 (**permalink**) 08/11/2010, 11:32

Amplio mi anterior respuesta con el último artículo publicado en smashingmagazine:

Equal Height Column Layouts with Borders and Negative Margins in CSS

Traducción de la intro (made in g. traslate):

Cita:

"¿Qué? Otro "Igualdad de columnas Altura" el artículo? ¡Ya basta! "Si esto es lo que piensa, entonces piense otra vez porque esta solución es diferente. No confiar en ninguno de los trucos habituales. No utiliza las imágenes, ni marcado adicional, ni CSS3, ni pseudo-clases, ni Javascript, ni la posición absoluta. Todo lo que se utiliza es la frontera y el margen negativo. Tenga en cuenta que este artículo también se muestran diferentes técnicas de construcción y repasar algunos conceptos.

cesarms89 · #9 (**permalink**) 08/11/2010, 21:43

ok, muchas gracias @kseso? le echare un vistazo, ya se me hacia raro que no se pudiera con css sindo un lenguaje tan potente, jeje