I have the following Div's aligned as show below, which works in IE8 -- but when viewed in IE7/IE6 the two divs are on top of each other and won't align side by side?

I tried display: inline; but this caused the div to move to the far left of the page? Any suggestions...? IE is a nightmare...

The CSS is:

#adzone {
width: 960px;
margin: 14px auto 0 auto;
clear: both;
}

Code:
<div id="adzone">
<div style="float:left;"><script type="text/javascript" src="http://domain.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=3"></script></div>

<div style="float:right;"><script type="text/javascript" src="http://domain.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script></div>

<div class="clear"></div>
</div>