CODEWITHSUNDEEP
htmlcss
hresult
hresult

Reputation: 301

Weird cross browser issue with float:right

I have an issue with float:left and float:right. I have never seen such issue before. I must oversee something.

I tried giving the wrapper a fixed width, I tried giving the search box a fixed width. Nothing worked. If you zoom out in Chrome, it will also bug. What is the issue for this?

CSS in question:

.wrapper {
  margin: 0 auto;
  min-width: 980px;
  width: 90%;
}

.logo {
   float: left;

   margin-top: 27px;
}

.search {
  float: right;

  background: rgba(255,255,255,0.35);
  padding: 9px;
  border-radius: 3px;
  margin-top: 40px;
}

HTML:

<div class="wrapper">
   <div class="logo"><img ../></div>
   <div class="search">[...]</div>
   <br style="clear:both;" />
</div>

Issue: Why is the search box not floated to the right side of the wrapper in all browsers / zooming?

Edit:

Issue solved! Thank you SO, and "rblarsen" and "Anonymous.X"!

Upvotes: 0

Views: 221

Answers (2)

razemauze
razemauze

Reputation: 2676

If you give your .wrapper {overflow:hidden;} it fixes the problem.

I believe that it is because the .wrapper is not having any height, and therefore doesn't align in the center as it should. By adding overflow:hidden; you make the div the same height as your content, as long as you don't specify a height for the .wrapper.

EDIT:

overflow:hidden; can cause future problems. Check the comment by t.niese, to avoid these.

Upvotes: 3

Dev Man
Dev Man

Reputation: 2137

try this

1. add position:relative to your wrapper

.wrapper {
          margin: 0 auto;
          min-width: 980px;
          width: 90%;
          position:relative;
         }

  1. add position:absolute;right:0; to your floated div like this

    <div style="float:right;position:absolute;right:0"></div>

Upvotes: 1

Related Questions