如何创建一个包含两个div并自动拉伸的div

Question

大家好我正在尝试创建两个div。一个div有不同的风格，如下所示

#subpage_left
{
    width:167px;
    border:solid 2px red;
    background-image:url(../../images2/images/altsayfa_menu_bg.jpg); 
    background-repeat: repeat;

    float:left;
}

第二个显示来自我的数据的文本

#subpage_right
{
    width:700px;
    background-color:White;
    border:solid 2px red;
    font-family: 'Museo300Regular';

    float:left;


}

我想并排放置这些div但是我的数据来到“subpage_right”div所以这个div按文本长度拉伸而“subpage_left”div不伸展我的意思是这些div的高度不同你可以看到图像< / p>

所以我需要一个类似于自动伸展这些div的包装器的CSS，但我该怎么办呢？

Answer 1

为此，您可以显示：table 属性。写得像这样：

#subpage_left,#subpage_right{
 display:table-cell;
}

选中此项以获取更多http://jsfiddle.net/9Eytv/

Answer 2

这就是我要做的事情：

#maincont
{
position:relative;
width: 867px; 
height: auto;}

#subpage_left
{
width:167px;
border:solid 2px red;
background-image:url(../../images2/images/altsayfa_menu_bg.jpg); 
background-repeat: repeat;
float:left;
}

#subpage_right
{
width:700px;
background-color:White;
border:solid 2px red;
font-family: 'Museo300Regular'; /* Use some standard font Like Arial */
float:left;
}
.clear
{
clear:both;
}

和div的

<div id="maincont">
<div id="subpage_left"></div>
<div id="subpage_right"></div>
<div class="clear"></div>
</div>

希望这适合你：）