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%;
}