Question

recently I have tried to achieve a navigation bar that has two sides, one on the right and one of the left, they are separated (not same div). I have managed to get the two navigation bars to work but my problem is that when the browser window is smaller then the wrapper (1000px) the right side of the navigation bar will not stick to the right side instead it will be somewhere in the center.

My code until now

css

div.wrapper
{
  min-width: 1000px;
}
div.menul
{
  float: left;
  width: 880px;
  padding: 15px;
  background-color: red;
}
div.menur
{
  position: absolute;
  right: 0;
  z-index: 999;
  width: 250px;
  padding: 15px;
  background-color: yellow;
}

html

<div class="wrapper">
  <div class="menul">
    menu
  </div>
  <div class="menur">
    menu
  </div>
</div>

help would be appreciated, thank you

Answer 1

Simply add position: relative to the #wrapper CSS. This will cause the right menu to be positioned relative to the #wrapper rather than the page itself

[Example]