CSS Help - float

I am having a tough time fixing a small issue. I am little embarrassed in asking help for this CSS issue but a different set of eyes might help fix this.

ISSUE

  1. Go to http://ajaxtown.com/uranium/

  2. Extreme top you will find a bar (telephone number and social icons and search)

  3. Now resize the window (mobile size)

  4. Again maximize it to full width.

  5. You will see the search icon coming down.

RESOLUTION

  1. While experimenting with firebug, i found that if you inspect element on the search icon, you will find the below css.

    .top-search {
       float: left;
       width: 40px;
    }
    
    
  2. If i uncheck float and then again check it, everything gets fixed. The search icon gets aligned with the social icons.

But I am not able work this out.

Any help will be highly appreciated.

Please let me know if I am not clear with my question.

Saha


I placed the search into the .social-icons div

<div class="social-icons top-social-icons">
    <a href="http://twitter.com/username" class="twitter" rel="external"><i class="icon icon-twitter"></i></a><a href="http://www.facebook.com/username" class="facebook" rel="external"><i class="icon icon-facebook"></i></a><a href="http://ajaxtown.com/uranium/?feed=rss2" class="rss" rel="external"><i class="icon icon-rss"></i></a>
    <div class="top-search">
        <a class="top-search-bt open" href="#">
        <i class="icon"></i></a>
    </div>
</div>

Quick fix