Problemas con div que no se expande a la altura de un div interno con texto 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:
Y este es el CSS<!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’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. 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 & 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 & EVENTS</a> | <a href="#" target="_self">CONTACTS</a></p>
<p>Copyright © 2009 Siam House</p>
</div>
</div>
</div>
</body>
</html>
Código:
Nota: en el CSS borré los comandos concernientes a la barra de navegación porque no son relevantes y superaba los 10.000 caracteresbody, 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 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
Gracias! 
Respuesta: Problemas con div que no se expande a la altura de un div interno con text 
