Ie7 float right bug?

Question

I have a div floated right. Inside that div are two other divs. The first div has a background color and when I refresh, it's "bleeding" into the second div. (Sometimes in front of it sometimes behind it.) When I scroll, it fixes itself. When I refresh it does it again. This is only happening in IE7. Bug? code below

#sidebar {float:right;width:310px;}
#articleSidebar {background:#DEE7E7;margin:0 5px 20px 5px;position:relative;}
#articleSidebarHeader {margin-top:10px;padding:5px;}
#articleSidebar h2, #articleSidebarHeader h2 {color:#5A5A5A;font-size:14px;font-weight:bold;}
#articleSidebar ul {color:#5A5A5A;font-size:11px;padding:0 7px;}
#articleSidebar ul li {background: transparent url(../images/bulletSquare9C.png) no-repeat scroll left 6px; padding:0 0 10px 7px;}
#articleSidebar ul li a {color:#5A6B73;display:block;text-decoration:underline;}
#articleSidebar ul li a strong {font-weight:bold;}
#sidebarAd {margin:0 5px 20px 5px;position:relative;}





<div id="sidebar">
  <div id="articleSidebar">
   <div id="articleSidebarHeader">
    <h2>Title here TBD</h2>
   </div>
   <ul>
    <li><a href="replaceMe">link</a>text</li>
    <li><a href="replaceMe">link</a>text</li>
    <li><a href="replaceMe">link</a>text</li>
    <li><a href="replaceMe">link</a>text</li>
   </ul>
  </div>
  <div id="sidebarAd">
  <!--300x250 ad here-->
  <iframe src="http://www.google.com" height="250" width="300" scrolling="no" frameborder="0"></iframe>
  </div>
 </div>

Answer 1

I think you're relative positioning is part of the problem. Both DIVs have the same relative positioning. I think maybe in IE7 the position and height/width of the elements original position before applying the "relative" positioning is not calculated correctly.

The fixes that come to mind are:

1. Use absolute positioning. This takes the elements out of the DOM before repositioning, while not holding the space they would have occupied in the page. In this case the positioning values cannot be the same or they will overlay each other.

2. Preferred method Use "floated" divs to achieve the same effect of what it sounds like you are doing. Rather than the relative positioning, you can specify margin CSS definitions to achieve the same visual layout.

   #articleSidebar {background:#DEE7E7;float:left;margin:0 5px 20px 5px;}    
   #sidebarAd{margin:0 5px 20px 5px;float:left;}