html - 如何在主 div 中组织 2 个 div 以使其始终静止？

Question

我想创建一个 div(在网站的主包装内)以包含 2 个 div 来填充前面提到的 div。我实际上已经这样做了....但我的问题是 2 个较小的 div 没有对齐也没有固定在主 div 中。如果它们被限制在主 div 中，这怎么可能呢？

这是我到目前为止所做的，并且存在这个问题:http://jsbin.com/tifuhute/17/

文本和 map (均带有黑色边框)应位于红色框内(这是主要的 div)并且在任何情况下都不应移动。

Answer 1

尺码有点偏。 (#column1 (300px) + #column2 (900px) = 1200px 而不是 1198)。使用 box-sizing:border-box;让它更容易

#container {    
    width:1200px;
    ...
}    
#column1 {
    width:300px;
    box-sizing:border-box;
    ...
}    
#column2 {
    width:900px;
    box-sizing:border-box;
    ...
}

http://jsbin.com/tifuhute/18/