页面右侧的 HTML 导航栏

Question

我希望页面右侧的导航栏占用 250 像素，主要内容根据窗口大小占用剩余空间。虽然，我希望主要内容出现在 HTML 中的导航之前，所以先是左侧，然后是右侧。

我实现了左边的导航栏如下:

#left {
    float:left;
    width:250px;    
    background: blue;
}

#right {
    margin-left: 250px;
    background: orange;
}

http://jsfiddle.net/wz355dkr/

如何在不重新排列 HTML 的情况下将它移到右边？

Answer 1

    html,
    body,
    div {
      height: 100%;
    }
    #right {
      float: right;
      width: 250px;
      background: blue;
    }
    #left {
      background: orange;
      float: left;
    }

<div id="right">
  hello
</div>
<div id="left">
  Content in the left hand side.
</div>