축소하면 내 레이아웃이 엉망이됩니다

Question

일주일 전에 webdesign을 배우기 시작했습니다. 서로 옆에 세 개의 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의 총 크기로 크기를 설정합니다. 플로트와