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

Question

I have a header that is divided into a few parts.

First, it's divided into left, and right.

The right part is then divided into stacked top and bottom, or at least that's what I'm trying to do.

However, they won't show up (unless there's text or something.)

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

You should to add this:

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

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