html - ズームアウトするとレイアウトが乱れる

Question

一週間前にウェブデザインを学び始めました。3 つの div が隣り合った Web ページを作成しようとしています。ズームアウトするとレイアウトが乱れます。50% のズーム レベルは問題ありませんが、さらにズームを開始すると、右側のサイドバーがコンテンツ div の下に表示されます。助けてください ：（

<div id="wrapper">

    <div id="banner">
    </div>

    <div id="topnav">
    </div>

    <div id="leftsidebar1">
    </div>

    <div id="content">
    </div>

    <div id="rightsidebar1">
    </div>

    <div id="footer">
    </div>

</div>


here's the css

    #wrapper{
    width: 900px;
    margin: 0 auto;
    padding: 10px 0 0 0;
    max-height:1000px;  
}

    #banner{
width:900px;
height:150px;
background-color: #000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

}

#leftsidebar1{
    float: left;
    width: 25%;
    height: 500px;
    background-color:#000;
}

#content{
    display:inline;
    width: 50%;
    height: 500px;
    background-color:#006;
    float:left;
}

#rightsidebar1{
    float:left;
    width: 25%;
    height:500px;
    background-color:#999;
}

Answer 1

親 div 内に 3 つの div を取得し、そのサイズを 3 つのフローティング div の合計サイズに設定します。