div won't float to the right

Question

I want the dropdown on the right. In such a way it doesn't clip the right side of the browser. No matter what something goes wrong. Why can't things not just work in css? (sry i'm really frustrated) There is always some special case why things have to be done different. Anyway, how can I get the dropdown to the right side?

<div id="footer">

  <div class="share">
    <ul class="nav nav-pills">

      <li class="nav-item dropup">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Share</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Facebook</a>
          <a class="dropdown-item" href="#">Twitter</a>
        </div>
      </li>

    </ul>
  </div>
</div>

#footer {
  position: fixed;
  bottom: 0;
}

.share {
  float: right;
}

Answer 1

add a width to your footer. The dropdown is floating right, the footer just isnt as wide as you think it is by default.

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

stuff like this can easily be diagnosed using dev tools that chrome or firefox provide :)