Divs won't expand to 100% width (on top of each other within another 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%;
}