页面右侧的HTML导航栏

Question

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

我在左侧实现了一个导航栏，如下所示：

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

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

http://jsfiddle.net/wz355dkr/

如何在不重新排序HTML的情况下将其移至右侧？

Answer 1

只需在css中将left更改为right：

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

<div id="left">
</div>
<div id="right">
</div>

Answer 2

    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>