Foros del Web » Creando para Internet » CSS »

Problemas con div que no se expande a la altura de un div interno con texto

Estas en el tema de Problemas con div que no se expande a la altura de un div interno con texto en el foro de CSS en Foros del Web. Buenas tardes!!! Recientemente hice esta conversion de psd a xhtml+css para un nuevo sitio que usa un CMS a medida, esta es la url(sin meter ...
  #1 (permalink)  
Antiguo 17/01/2009, 13:45
Avatar de praetor2004  
Fecha de Ingreso: julio-2004
Ubicación: Bogotá - Colombia
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 0
Exclamación Problemas con div que no se expande a la altura de un div interno con texto

Buenas tardes!!!

Recientemente hice esta conversion de psd a xhtml+css para un nuevo sitio que usa un CMS a medida, esta es la url(sin meter el template al css): Enlace

El problema es que el contenedor (#main) no se expande para alojar al div que contiene el texto (#txt), intenté usar el hack min-height pero solo funciona para IE y para los otros navegadores es que el texto se sale y desplaza los divs de abajo (en este caso el div que comienza donde dice Awards, que debería quedar inmediatamente al lado de Hours & Contact.

Aqui pego el xhtml

Código:
<!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" xml:lang="en">
<head>
<title>Siam House - Voted best Ethnic Restaurant in Bloomington</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<meta name="keywords" content=" "/>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="container">
        <div id="banner">
            <h1><a href="http://www.siamhouse.com/" target="_self" title="Siam House :: Access Key = a" accesskey="a">Siam House - Voted best Ethnic Restaurant in Bloomington</a></h1>
      </div>
        <div id="menu">
      <ul>
        <li><a id="nav-hom" href="#">HOMEPAGE</a></li>
        <li><a id="nav-abo" href="#">ABOUT US</a></li>
        <li><a id="nav-men" href="#">OUR MENU</a></li>
        <li><a id="nav-spe" href="#">SPECIALS</a></li>
        <li><a id="nav-con" href="#">CONTACTS</a></li>
      </ul>
        </div>
        <div id="content">
      <div id="main">
        <div id="txt">
          <p>Welcome to our world of Thai family dining. An authentic Thai meal  consists of servings of Curry, Stir-fry, seafood, meat, and vegetables  that are either steamed or grilled. The meal usually begins with soup  (Tom Yum, Tom Kha) and a mixed salad (Yum). And accompanying every meal  of the day is rice, served with breakfast, lunch and dinner. </p>
          <p> We recommend that each person in your party select a different type of  dish: one Curry, one Stir-fry, one seafood specialty, and so on. Thai  food is meant to be shared, both the tastes and the experiences. We  believe that sharing is essential. </p>
          <p>Thai food can be viewed as the melting pot of Asian food, combining the  dried spice preparations of India with the stir-fry and fresh  preparations of the Chinese. In addition to dried spices, such as  cumin, coriander, nutmeg, cinnamon, star anise and cloves we also use  fresh spices from roots, leaves, flowers and fruit skins; including  ginger and taro root, lime and mint leaves, kaffir, chili, cilantro and  basil. All of our spices and vegetables are fresh and mostly locally  grown. </p>
          <p>Our curry is made with a coconut milk base, a variety of fresh spices  and vegetables and is prepared with a choice of meat. It is comparable  to an American stew, albeit a remarkably unique flavor and texture. The  main ingredients of the curry paste are lemon grass, garlic, kaffir,  and garlanga. By adding different spices to this paste the result  creates different types of curry. The color of the curry is determined  by the chili used. </p>
          <p>For a red curry, the chili is picked when it is fully ripened and red,  giving the curry it&rsquo;s red hue. The combination of different amounts of  coconut milk and spices yield different varieties of red curry, such as  Chu chee and Panang.&nbsp; An unripened chili, picked when still green is  used for a green curry, which is spicy and often paired with seafood.  The yellow curry is the mildest and sweetest curry as it has no chili  in it. Its yellow color comes from the turmeric root and is commonly  served with chicken or pork. </p>
          <p>Thai cuisine varies with the region. In the North, less coconut milk is  used and the rice is stickier. Where as Southern Thai cooking  incorporates more coconut milk and is very spicy. In the East there is  more barbecue, sticky rice and less coconut milk. West and Central  Thailand represent a combination of the regions. We hope you enjoy our  traditional Thai cooking and we thank you for joining us.</p>
        </div>
      </div>
      <div id="info">
        <div class="v-line" id="inf-01">
          <h2>Hours and Contact </h2>
          <h3>Monday-Thursday<br />
          11am-10pm</h3>
          <h3>Friday &amp; Saturday<br />
          11am-11pm</h3>
          <h3>Sunday<br />
          11am-9pm</h3>
          <h3>Lunch Buffet served<br />
          Monday-Friday 11am-2pm</h3>
        </div>
        <div id="inf-02">
          <h2>Awards</h2>
          <p>Dolores et ea consetetur sadi pscing elit consetetur pscing elitr, sed diam nonumy eirmod Dolores et ea consetetur sadi elit consetetur pscing elitr, sed diam nonumy eirmod  consetetur pscing </p>
          <p>Dolores et ea consetetur sadi pscing elit consetetur pscing elitr, sed diam nonumy eirmod Dolores et ea consetetur sadi elit consetetur pscing elitr, sed diam nonumy eirmod  consetetur pscing </p>
          <p>Dolores et ea consetetur sadi pscing elit consetetur pscing elitr, sed diam nonumy eirmod Dolores et ea consetetur sadi elit consetetur pscing elitr, sed diam nonumy eirmod  consetetur pscing</p>
        </div>
      </div>
        </div>
        <div id="footer">
          <div id="botmenu">
            <p><a href="index.html" target="_self">HOME</a> | <a href="#" target="_self">ABOUT US</a> | <a href="#" target="_self">OUR MENU</a> | <a href="#" target="_self">LOCATION</a> | <a href="#" target="_self">SPECIALS</a> | <a href="#" target="_self">NEWS &amp; EVENTS</a> | <a href="#" target="_self">CONTACTS</a></p>
            <p>Copyright &copy; 2009 Siam House</p>
            </div>
        </div>
    </div>
</body>
</html>
Y este es el CSS

Código:
body, html {
    background-color: #FFF;
}
#container {
    width: 775px;
    \width: 795px;
    w\idth: 775px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    position: relative;
}
#banner {
    height: 100px;
    background-image: url(../im/bg-banner.jpg);
    background-repeat: no-repeat;
}
#banner h1 {
    background-image: url(../im/bg-banner-h1.gif);
    background-repeat: no-repeat;
    height: 50px;
    width: 326px;
    text-indent: -20000px;
    top: 30px;
    position: absolute;

}
#banner h1 a {
    height: 50px;
    width: 326px;
    display: block;
    text-decoration: none;
    cursor: pointer;
    padding: 0px;
}

#content {
    background-repeat: repeat-x;
    background-image: url(../im/bg-content.gif);
    margin-bottom: 10px;
}
#content p {
    margin: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 0.8em;
}
#main {
    background-image: url(../im/bg-main.jpg);
    background-repeat: no-repeat;
    background-position: 27px top;
    min-height: 350px;
  height: auto !important;
    height: 350px;
}
#txt {
    text-align: left;
    width: 350px;
    float: right;
    margin-right: 25px;
    margin-top: 35px;
}
#txt p , #inf-01 p, #inf-02 p{
    font-family: "Times New Roman", Times, serif;
    font-size: 0.8em;
    color: #999;
    text-align: left;
    line-height: 1.1em;
    padding-bottom: 5px;
    padding-top: 2px;
}
#txt p a , #inf-01 a, #inf-02 a{
    color: #333;
    background-color: #FFF;
    text-decoration: none;
}
#txt p a:hover , #inf-01 a:hover, #inf-02 a:hover{
    color: #93081F;
    background-color: #FFF;
}
#txt h2 , #inf-01 h2, #inf-02 h2{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.2em;
    color: #960822;
    text-align: left;
    font-weight: normal;
    line-height: 1.2em;
    padding-bottom: 6px;
    padding-top: 0px;
}
#txt h3 , #inf-01 h3, #inf-02 h3{
    font-family: "Times New Roman", Times, serif;
    font-size: 0.8em;
    color: #E40D37;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
}

#info {
    height: 250px;
    background-image: url(../im/bg-info.gif);
    background-repeat: no-repeat;
    background-position: top;
}
#inf-01, #inf-02 {
    height: 225px;
    margin-top: 25px;
    width: 325px;
    margin-left: 45px;
    display: inline;
    float: left;
}


#footer {
    clear: both;
    background-image: url(../im/bg-footer.gif);
    background-repeat: repeat-x;
    height: 79px;
}

#botmenu {
    height: 59px;
    width: 765px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.7em;
    text-align: center;
    padding-top: 20px;
    color: #999;
}
#botmenu a {
    color: #999;
    text-decoration: none;
    padding: 0px;
}
#botmenu a:hover {
    color: #666;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #999;
    padding: 0px;
}
.v-line {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC;
}
Nota: en el CSS borré los comandos concernientes a la barra de navegación porque no son relevantes y superaba los 10.000 caracteres

NOTA IMPORTANTE: Agregar una clase con una mayor altura para el contenedor, no me sirve porque al estar el template en un CMS no puedo agregar esa clase solo a la página que tiene mucho texto (al menos no en el CMS que se va a manejar)

Alguien que me pueda echar una mano? Gracias de antemano
__________________
Leonardo Enrique Báez R.
Designs and IT - www.designsandit.com

Web Design – Valid Standards Websites
  #2 (permalink)  
Antiguo 17/01/2009, 13:54
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Problemas con div que no se expande a la altura de un div interno con text

ponele float:right al igual que al #txt
o depues del #main agrega un div mas con clear:both
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 17/01/2009, 13:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con div que no se expande a la altura de un div interno con text

Pues si no puedes actuar para meter un div de corte, añadele al #txt la propiedad
clear:both
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 17/01/2009, 14:23
Avatar de praetor2004  
Fecha de Ingreso: julio-2004
Ubicación: Bogotá - Colombia
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problemas con div que no se expande a la altura de un div interno con text

Haciendo testing... Gracias!
__________________
Leonardo Enrique Báez R.
Designs and IT - www.designsandit.com

Web Design – Valid Standards Websites
  #5 (permalink)  
Antiguo 17/01/2009, 14:25
Avatar de praetor2004  
Fecha de Ingreso: julio-2004
Ubicación: Bogotá - Colombia
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problemas con div que no se expande a la altura de un div interno con text

Cita:
Iniciado por emiliodeg Ver Mensaje
ponele float:right al igual que al #txt
o depues del #main agrega un div mas con clear:both
Esto funciona para los buenos navegadores, pero entonces en IE se daña...
__________________
Leonardo Enrique Báez R.
Designs and IT - www.designsandit.com

Web Design – Valid Standards Websites
  #6 (permalink)  
Antiguo 17/01/2009, 14:26
Avatar de praetor2004  
Fecha de Ingreso: julio-2004
Ubicación: Bogotá - Colombia
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problemas con div que no se expande a la altura de un div interno con text

Cita:
Iniciado por kseso? Ver Mensaje
Pues si no puedes actuar para meter un div de corte, añadele al #txt la propiedad
clear:both
Un saludo
Gracias por el dato, pero no tiene resultado...
__________________
Leonardo Enrique Báez R.
Designs and IT - www.designsandit.com

Web Design – Valid Standards Websites
  #7 (permalink)  
Antiguo 18/01/2009, 00:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con div que no se expande a la altura de un div interno con text

Añade overflow: auto; al selector #main.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 18/01/2009, 18:40
Avatar de praetor2004  
Fecha de Ingreso: julio-2004
Ubicación: Bogotá - Colombia
Mensajes: 90
Antigüedad: 13 años, 4 meses
Puntos: 0
De acuerdo Respuesta: Problemas con div que no se expande a la altura de un div interno con text

Cita:
Iniciado por Mikmoro Ver Mensaje
Añade overflow: auto; al selector #main.
Perfecto! Eso funcionó muy bien! Gracias por el dato Mikmoro! Y gracias a los demás por colaborar buscando una solución!
__________________
Leonardo Enrique Báez R.
Designs and IT - www.designsandit.com

Web Design – Valid Standards Websites
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:47.