缩小时我的布局搞砸了

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并将其大小设置为三个浮动div的总大小。