html - 缩小时我的布局变得困惑

Question

我一周前开始学习网页设计。我正在尝试创建一个网页，其中三个 div 彼此相邻。缩小时我的布局变得困惑。 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 中获取三个 div，并将其大小设置为三个 float div 的总大小。