title: Putting 2 divs side by side / Internet Explorer 6/7 float and padding (?) bug fix
body: <p>I need to put 2 divs side by side. But what's more important, I want this to display correctly in IE6/7. I have managed to succeed this with Firefox though.
  My code:</p>
  
  <pre><code>#container{
      padding:10px;
  }
  
  #left{
      float:left;
      width:500px;
  }
  
  #right{
      width: 300px;
      float:right;
      padding:7px;
      background-color:#F0FCEB;
  }
  
  &lt;div id="box"&gt; 
  &lt;div id="left"&gt;Some content here&lt;/div&gt; 
  &lt;div id="right"&gt;Some content here 2&lt;/div&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The results are as shown below:</p>
  
  <p>Desired Output (FF Output): 
  <img src="https://i.stack.imgur.com/PCGnT.gif" alt="Desired output"></p>
  
  <p>IE6/7 Output:
  <img src="https://i.stack.imgur.com/XK5Ca.gif" alt="IE6/7 output">
  How can I get rid of this unnecessary padding in IE, or is there any other method?
  Note: I use jQuery and Nifty for jQuery to create rounded corners.</p>