title: Float a DIV Left using CSS
body: <p>I have two <code>div</code>s formatted as panels. One is the main panel whereas the other is something like a sidebar. I would like the sidebar to float to the left, but the latter is embedded inside the main <code>div</code>. I want it to display next to the main panel, rather than inside it.</p>
  
  <p>I know I could float the sidebar left, the main panel right and add some more content after them and use <code>clear: both</code> to make the page resize and scroll properly; this sounds like a hack, however, and it requires specifying the size of both panels. If I could float just the sidebar to the left, then the main panel would size itself automatically to cover the rest of the page.</p>
  
  <p>My HTML code at the moment looks something like this:</p>
  
  <pre><code>&lt;div id="sidebar" class="panel"&gt;
      Sidebar
  &lt;/div&gt;
  
  &lt;div id="content" class="panel"&gt;
      &lt;p&gt;Content&lt;/p&gt;
      &lt;p&gt;Content&lt;/p&gt;
      &lt;p&gt;Content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS of interest is:</p>
  
  <pre><code>#sidebar {
      float: left;
      width: 30%;
  }
  </code></pre>
  
  <p>In the screenshot below, one can easily see that the sidebar is floating to the left, but is somehow inside the main panel. In the HTML code, however, the sidebar is clearly outside the main panel. How can I fix that without having to use <code>float: right</code> on the main panel?</p>
  
  <p><a href="https://i.stack.imgur.com/JCcL5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JCcL5.png" alt="Ugly Result"></a></p>