Html – Putting 2 divs side by side / Internet Explorer 6/7 float and padding (?) bug fix

csscss-floathtmlinternet-explorer

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:

#container{
    padding:10px;
}

#left{
    float:left;
    width:500px;
}

#right{
    width: 300px;
    float:right;
    padding:7px;
    background-color:#F0FCEB;
}

<div id="box"> 
<div id="left">Some content here</div> 
<div id="right">Some content here 2</div>
<div style="clear:both;"></div>
</div>

The results are as shown below:

Desired Output (FF Output):
Desired output

IE6/7 Output:
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.

Best Solution

Some content here 2

What's that content? Your example works as-is, so it's something in the content itself that causes the issue.

Does it perhaps include a form, as it looks like on the shot?

<form> has a default top/bottom margin, and how vertical margins collapse is a matter of some confusion and browser differences (it's usually best avoided if possible). So the mini-reset rule:

form { margin: 0; }

may help.

Related Question