CODEWITHSUNDEEP
htmlcssresponsive-design
Abhishek Saha
Abhishek Saha

Reputation: 2564

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

Upvotes: 0

Views: 118

Answers (4)

Abhishek Saha
Abhishek Saha

Reputation: 2564

I managed to solve it this way:

In CSS:

//Before

.top-search {
  float: left;      
  width: 40px;
}

//after

.top-search {
  display: table;      
  width: 40px;
}

Upvotes: 0

Merlin
Merlin

Reputation: 4917

That works for me on Chrome (Canary)

<div class="social-icons top-social-icons">
    //social icons here
    <a class="top-search-bt open" href="#"><i class="icon"></i></a>
</div>

Upvotes: 1

Denis Slonovschi
Denis Slonovschi

Reputation: 889

CSS fix

.topbar-right .topbar-right-inner {

border-right: 1px solid #E2E2E2;
width:163px;

}

@media only screen and (max-width: 767px) {

.topbar-right .topbar-right-inner {
    border-right: none;
    margin: 0 auto;
}

}

Upvotes: 0

misterManSam
misterManSam

Reputation: 24692

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

Upvotes: 1

Related Questions