title: How to make div blocks not floating using CSS?
body: <p><strong>Layout.cshtml</strong></p>
  
  <pre><code>&lt;section id="main"&gt;
          &lt;div id="sidebar"&gt;
              @{Html.RenderAction("CategoryMenu", "Store");}
          &lt;/div&gt;
          &lt;div id="content"&gt;
              @RenderBody()
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>...
      #main {
          padding: 30px 30px 15px 30px;
          background-color: #fff;
          -webkit-border-radius: 4px 0 0 0;
          -moz-border-radius: 4px 0 0 0;
          border-radius: 4px 0 0 0;
          overflow: hidden;
      }
  
      #sidebar {
          display: block !important;
          width: 15%;
          float: left;
          font: bold 20px arial, verdana;
          background: green;
          height: inherit !important;
      }
  
      #content {
          display: block !important;
          float:none;
      }
  ...
  </code></pre>
  
  <p>I tried to set sidebar's height to 100%, then inherit. What should I do to make two blocks not floating to each other?</p>