div不会扩展到100％的宽度（在另一个div中彼此重叠）

Question

我有一个标题，分为几个部分。

首先，它分为左和右。

然后将右侧部分分为顶部和底部堆叠，或者至少这是我要尝试的操作。

但是，它们不会显示（除非有文字或其他内容。）

的HTML

<div id="header">
    <div id="header_left">
        <div id="header_title">
            <p id="t1">TEXT</p>
            <p id="t2">TEXT</p>
            <p id="t3">TEXT</p>
        </div>
    </div>
    <div id="header_right">
        <div id="right_top">x</div>
        <div id="right_bottom">x</div>
    </div>
</div>

的CSS

    #header_right {
    height:100%;
    float:right;
}

#right_top {
    height:140px;
    width:100%;
    display:block;
    background-color:#FF0000;
}

#right_bottom {
    height:60px;
    width:100%;
    display:block;
    background-color:#000;
}

Answer 1

您必须设置position：absolute以显示空div

position:absolute;

Answer 2

您应该添加以下内容：

#header_right {
    height:100%;
    float:left;  /*changed from right*/
}

/*added new class*/
#header_left{
    float: left;
    width: 97%;
}