Html 浮动和最大宽度的问题

我尝试构建一个布局，在更高分辨率上使用2个浮动DIV，而在小分辨率上不使用浮动DIV。一个（亚导航）具有固定宽度，另一个（内容）具有最大宽度

以下是HTML的示例代码：

<div id="subnavigation">
   lorem ipsum...
</div>
<div id="content">
   lorem ipsum...
</div>

我现在的问题是，我需要在没有浮动的内容下进行亚导航。有人有主意吗？

---

我尝试了一点CSS中的calc（）来获得固定的内容宽度（能够浮动），但它在我的android手机上不起作用。

你可以使用一些

这里有一种方法（可能有点过于复杂）

HTML

小提琴：

#subnavigation {
   float:right;
   width:320px;
}
#content {
   max-width:730px;
}
@media only screen and ( max-width:800px ) {
   #subnavigation, #content {
      float:none;
      width:auto;
   }
}

<div class="page">
    <div class="content-wrapper">
        <div class="content">
            ..content..
        </div>
    </div>
    <div class="sidebar">
        ..content..
    </div>
</div>

.page {
    width:1050px; /*320px + 730px*/    
    max-width:100%;
    margin:0 auto;
    background:grey;
}

.content-wrapper {
    float:left;
    width:100%;
}

.content {
    margin-right:320px;
    background:orange;
}

.sidebar {
    float:left;
    width:320px;
    margin-left:-320px;
    background:green;
}

@media (max-width:480px) {
    .content-wrapper {
        float:none;
        width:auto;
        margin-bottom:20px;
    }
    .content {
        margin-right:0;    
    }
    .sidebar {
        float:none;
        margin:0;
        width:auto;
    }
}