html - 両方の div の幅が同じ固定幅の外側の絶対配置 div 内に 2 つの内側の div を配置する方法は?

Question

固定幅 559px の絶対位置を持つコンテナー div があります。div1 と div2 の幅を同じにして、各 div の内容が固定幅を超えないようにしたいと考えています。

これが私が今持っているものです:

    <div id="top">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>


#top{
    position:absolute;
    top:0;
    width:559px;
    height:133px;
    background-color:black;
    overflow:hidden;
}

#div1
{


}
#div2
{


}   

div1 と div2 のスタイルがありません。どうすればそれを達成できますか？

Answer 1

2 つの div を単純にフロートして、幅の半分にすることができます。

#div1, #div2 {
    width: 50%;
    float: left;
}

ここでフィドル：http://jsfiddle.net/nkxWP/1/

Answer 2

#div1-2 にスタイリングを与えていません...追加するだけです

#div1, #div2
{
    width: 50%;
    overflow: hidden;
    float: left;
}

Answer 3

デモ

CSS

    #top{
    position:absolute;
    top:0;
    width:559px;
    height:133px;
    background-color:black;
    overflow:hidden;
}

#div1, #div2 {
    position: relative;
    width: 50%;
    float: left;
    color:white;
    background-color:yellow;
}
#div1 {
    background-color: blue;
}