Foros del Web - Ver Mensaje Individual - Problemas con div que no se expande a la altura de un div interno con texto

praetor2004 · #1 (**permalink**) 17/01/2009, 13:45

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