容器div高度不会根据内容增加大小

Question

当内容div增长时，我的容器div高度不会增加大小。在下面的代码中，我希望类名为summary的div的大小增加，因为div house-address增长。任何帮助都感激不尽。

HTML：

<div class="summary shortS"> 
    <div class="house-address"> 
     <h2>booboo</h2> 
     <p>hehe hehee hdhddgf jfhfjf lkjgkhgh kjgkjg itutiut mhvjhgjhfg nbcncnb nbcnbc</p> 
    </div> 
    <div class="house-price"> 
     <h4>$17272</h4> 
     <p>Guide Price</p> 
    </div> 
    <br style="clear:both;" /> 
</div> 

CSS：

.summary.shortS { 
    display: block; 
    height: 64px; 
} 

.house-address { 
    width: 400px; 
    float: left; 
} 

.house-price { 
    width: 150px; 
    float: right; 
} 

Answer 1

摆脱height: 64px的。

http://jsfiddle.net/cZsS5/

编辑：作为建议，min-height: 64px大概所需的样式。

Answer 2

你的问题是，你要定义一个明确的height的元素（只要它也有shorts一类的名称，该元素设置对特定高度无论它的内容：

.summary.shortS { 
    display: block; 
    height: 64px; 
} 

代替height使用min-height（如果任何形式的'高度必须被定义为强制页面上的知名度，例如，即使是空的）：

.summary.shortS { 
    display: block; 
    min-height: 64px; 
} 

否则只需完全删除height声明。

JS Fiddle demo。

Answer 3

.summary.shortS { 
display: block; 
min-height: 64px; 
height: auto; 
float: left; 
}