CSS：当视口足够大时，将div对齐到中心，否则为负边距？

Question

我们假设以下html标记：

<div id="container">
   <div id="inner"></div>
</div>

我希望内部div在其父级（容器）中居中，而如果视口中没有足够的空间，它应该逐渐转到负左边距到-XY px。 / p>

情况是： 我有一个容器div，总是有一个简单的背景。在这个div我有另一个div，它有一个功能区作为背景，并包含导航。如果视口足够宽，我想显示页面中心的所有内容（=来自内部div）。到目前为止，将margin: 0 auto设置为内部没有问题。但是，当视口小于色带的宽度时，我想“切断”左侧的色带（逻辑上，右侧是自动的）到它“弯曲”的点，这就是导航按钮开始（左起169px）。我想出了这个：

#container {
    height: 240px;
    position: relative;
    background: url("../images/top_noise_bg.png") top left repeat #222;
    margin-left: -169px;
    margin-right: -169px;
}

当视口足够大时，边距按预期工作。当它太小时，左侧工作正常，但是当我在那里滚动时，负右边缘会在右侧切掉* top_noise *背景。此外，它还会产生另一种不良影响：页面将始终具有水平滚动条。有什么建议怎么解决这个？谢谢！

jsfiddle example - ＆gt;将区域调整到非常小，然后滚动到红色div的右侧。