摆弄包装纸的宽度

Question

我正在尝试扩展我的包装器，但它没有扩展，如果它已经超过了你在叠加层上看到的“X”按钮。

代码：

#hire-wrapper { 
    margin: 0 auto;
    position:relative;
    right: 140px;
    width: 900px;
    margin-top: 15px;
    margin-bottom: 20px;
    border: 1px solid green;
}

#hire-content { 
    float:left;
    width:500px;
    border: 1px solid #E8E8E8;
    margin-bottom: 3px;
    margin-left: 5px;
    color: #8E8E8E;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 0 3px 3px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 3px #888;
    padding: 4px 0 0 5px;
}

.hire-right {
    float: right;
    width: 420px;
    display: block;
    border: 1px solid grey;
}

那条绿线是包装纸，我只是用它来看看宽度的位置。我正试图让它旁边的那个其他盒子，但我遇到了麻烦，它与我的包装器有关。有什么想法吗？

http://jsfiddle.net/gkKa5/

感谢

Answer 1

看看为计数器0高度浮动元素添加clearfix解决方案。

我还建议为所有元素添加box-sizing样式，这样就不会遇到填充向外推出内容宽度的问题

如果您想继续使用float进行定位，这应该有助于计算元素的精确宽度。

对于两个元素的精确宽度的替代方法是使用内部部分的基于百分比的宽度。 （这也应该允许您根据容器宽度更多地创建响应式大小，而不是对每个内部侧面进行硬编码 - 但这只是个人偏好）

查看此updated fiddle

PS。观察你的html标签关闭（你的代码中有一些额外的开放标签）