Need some help to position divs, please

Hi, I'm trying to place two divs, one on top of the other , it works fine on IE+chrome+opera but in Firefox goes as you can see on image atached

The html

<div class="likeBox"> 
	<div>We love you too</div> 
	<span class="i"></span> 
	<span class="like"><iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%***&amp;layout=button_count&amp;show_faces=true&amp;width=83&amp;action=like&amp;font=tahoma&amp;colorscheme=light&amp;height=25&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:83px; height:25px;" allowTransparency="true"></iframe></span> 
	<span class="dl"></span> 
</div>

<div id="sidebar-social-icons">
<table border="0" cellspacing="1" cellpadding="1">
  <tr>
    <th scope="col"><a href="http://www.facebook.com/***"><img src="http://***.com/images/facebook.png" width="30px" height="30px" /></a></th>
    <th scope="col"><a href="http://www.flickr.com/photos/***/"><img src="http://***.com/images/flickr.png" width="30px" height="30px"  /></a></th>
    <th scope="col"><a href="https://picasaweb.google.com/**.**"><img src="http://***.com/images/picasa.png" width="30px" height="30px"  /></a></th>
    <th scope="col"><a href="http://feeds.feedburner.com/***"><img src="http://***.com/images/rss.png" width="30px" height="30px"  /></a></th>
    <th scope="col"><a href="http://www.stumbleupon.com/stumbler/***/"><img src="http://***.com/images/stumble.png" width="30px" height="30px"  /></a></th>
    <th scope="col"><a href="http://twitter.com/***"><img src="http://***.com/images/twitter.png" width="30px" height="30px"  /></a></th>
    <th scope="col"><a href="http://www.youtube.com/***"><img src="http://***.com/images/youtube.png" width="30px" height="30px"  /></a></th>
  </tr>
</table>
</div>

HTML:

and the css

#recent-posts { width: 269px; margin: 0 0 20px 0;  /*padding: 10px 20px 10px 0;*/ background: none; font-size: 11px; display: block;}
#recent-posts h4{ font-size: 24px; color: #333333; padding-bottom: 12px; }
#recent-posts  li { float: left; width: 5em; margin: 0; padding: 0;}
#recent-posts  ul { float: left; width: 25em; margin-left: -20; padding: 0; list-style: none; }
.footer-thumb { width: 40px; height: 40px; border: 3px solid #555; margin: 3px 6px 15px 3px; padding: 0; float: left; }

#sidebar-social-icons {padding: 0 0 50px 22px; display: block;}

Code (markup):

any help will be very much appreciated

Karl

 

Try adding a clear: both; to the #sidebar-social-icons ID.

 

Done, working.

Thanks

 

pls closed first div properly and set the floating of second div you can use Float:0 auto 0 auto. Please also set its position. You can use firebug to see the problem in div and solve it.