IE7 floating box jumps after page load

I've got an issue with two left-floating boxes that aren't rendered correctly by Internet Exp开发者_如何转开发lorer 7.

I have two small div boxes, containing some form elements, next to each other, which are both floating left. The first box has a left margin of 25px to provide some distance from the container and the box next to it has a left margin of 15px in order to keep some space between the two boxes.

When the page loads in Internet Explorer 7, the first box (with the 25px left margin) is correctly displayed initially, but when the page finishes loading it suddenly jumps to the left as if it hasen't got any margin..

When I set the two boxes to float:right the problem seems to be solved but I really need to let them float left. Does anybody have a clue on how to solve this problem?

Update:

I've looked around a bit to see what the problem could be about. First I tried the hasLayout property but it seems it hasen't got anything to do with my problem. However, beneath the two boxes there is a div that is filled with content through an AJAX request on page load. When I disable the AJAX request, the boxes appear to keep their position instead of shifting to the left.. I have no clue what the relation between these two divs could be as the one receiving it's content through AJAx seems to affect the divs above. The CSS properties aren't tampered with by the jQuery function performing the $.post();..

The HTML:

<div id="box_a" class="boxes">
<h2>Box A</h2>
    <ol>
        <li><label for="input1">Input 1</label><input type="text" name="input1" id="input1" /></li>
        <li><label for="input2">Input 2</label><input type="text" name="input2" id="input2" /></li>
    </ol>
</div>
<div id="box_b" class="boxes">
<h2>Box B</h2>
    <ol>
        <li><label for="input3">Input 3</label><input type="text" name="input3" id=" input3" /></li>
        <li><label for="input4">Input 4</label><input type="text" name="input4" id="input4" /></li>
    </ol>
</div>

The CSS:

div#box_a {
    float:left;
    margin-left:25px;
}

div#box_b {
    float:left;
    margin-left:15px;
}

div.boxes{
    padding:5px;
    border:1px solid #C5C5C5;
    background:#F4F2F3;
    width:255px;
    margin-bottom:5px;
    position:relative;
}

Thanks in advance

This worked for me: ie8 div jumps after page load

In short, use padding-left instead of margin-left on the floated boxes.