title: IE7 Not Playing Nice with My Floating Sidebar
body: <p>I'm trying to get a dynamically sized sidebar to float in the upper right portion of my web pages (but below the header and nav) and have the main content on the page flow around it (sort of in an "L" shape except with the bottom part of the "L" really thick).  The width and height of the sidebar will vary from page to page so I can't use any hard values.</p>
  
  <p>My css looks like:</p>
  
  <pre><code>#main {
      width: 850px;
      height: auto;
  }
  
  #sidebar {
      width: auto;
      float: right;
  }
  </code></pre>
  
  <p>(plus some padding, margin, and background color code I think is inconsequential)</p>
  
  <p>My html looks like:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;  
      &lt;div id="header"&gt;    /* header stuff */    &lt;/div&gt;  
      &lt;div id="nav"&gt;       /* nav stuff */       &lt;/div&gt;  
  
      &lt;div id="sidebar"&gt;  
          /* my sidebar content, really just an h3 and a ul */
      &lt;/div&gt;
  
      &lt;div id="main"&gt;
          /* lots of content here */
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't completely understand why I have to have the sidebar div first, but it this code works fine in FF, Chrome, Safari (Windows), and IE8.  But on IE7 (and IE6, which I don't care about), the main content gets pushed down below the bottom of the sidebar, as if there was a "clear: left" on the sidebar div (but there isn't).</p>
  
  <p>I have a feeling this is one of those evil IE7 non-compliance bugs, especially because IE8 behaves exactly like the other browsers.  But I have no idea how to fix it.</p>
  
  <p>Any ideas? TIA.</p>