title: My layout gets messed up when zoomed out
body: <p>I started learn webdesign one week ago. I'm trying to create a webpage with three divs next to each other. My layout gets messed up when zoomed out. 50% zoom level is okay but when I started to zoom further right sidebar goes under the content div. please help :(</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;div id="banner"&gt;
      &lt;/div&gt;
  
      &lt;div id="topnav"&gt;
      &lt;/div&gt;
  
      &lt;div id="leftsidebar1"&gt;
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
      &lt;/div&gt;
  
      &lt;div id="rightsidebar1"&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  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;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>#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;
  }
  </code></pre>