IE7 Bug - the main-box moves to the left on hover

Question

I'm trying to fix this issue in IE7 that when you hover on it it won't remain in its position but will go to the left side. I've tried display:inline but it won't work in this case.
You can test it here: http://www.sneakyrascal.com/kayak/results.html
This is the code I am using for the main-box(the middle one):

.results #container{ 
    float:left;
    width: 527px;
    margin:38px 0 0 20px;
    padding-left:1px;
    position: relative;
    border: #ccc 1px solid;
    background: #fff;
}

Thanks in advance

Answer 1

The problem is caused by position:relative on #main-content . If you remove it the container will not jump any more:

#main-content {
    margin-top: 20px;
    position: relative; /* delete this */
}

Also you might have noticed that your .sites div was not lining up properly. Adding left: 0 will fix that:

.results #container UL LI.box .left-side .sites{
    width: 90px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 0; /* add this */
}

Answer 2

Huhh, weird bug, you can fix it by properly containing your #main-content id. Just add this to it:

display:inline-block;