css - Div 忽略设置的宽度约束，CSS

Question

全部。我有这个问题，我已经明确规定了某个 div 应该有多宽，但它忽略了它。我有一个包装器，我想在其中并排放置一个侧边栏和一个内容栏。内容栏似乎将侧边栏推开并填满了所有空间。

问题代码:

#wrapper{
    font-family: "Georgia", serif;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
    width: 700px;
    position: relative;
}

#content{
    float: left;
    width: 400px;
    padding-left: 25px;
    padding-right: 50px;
}

#sidebar {
    float: right;
    width: 175px;
    padding-right: 25px;
}

HTML 很简单 等等等等等等 简而言之

我将 Lorem Ipsum 放在内容所在的位置，并将一些 Lorem Ipsum 放在边栏中。 chrome 中的元素检查器显示内容为 700 像素宽，即使我声明它为 400 像素。我真的不关心 ie6 兼容性。

http://imgur.com/A1w0a它应该是这样的。

有人说了一些关于 fiddle 的事情。我这样做对吗 http://jsfiddle.net/R3Wyw/1/大的 Lorem Ipsum block 更细，只有 400 像素的文本，而侧边栏应该向上移动并插入旁边。

Answer 1

您的代码中存在基本的 HTML 和 CSS 语法问题:

• HTML结束标签应该写成</div>永远不会</div id="content"> .

好:

    <div id="content" class="something" role="main">
      <p>Content</p>
    </div>

差:

    <div id="content" class="something" role="main">
      <p>Content</p>
    </div id="content" class="something" role="main">

• CSS 注释必须写成/* a CSS comment */ , 不是 <-- HTML comment -->

您应该尝试在 http://validator.w3.org 中验证您的代码(HTML) 和 http://jigsaw.w3.org/css-validator/ (CS) 在发布之前(使用 Firefox 上的 Web Developer Toolbar 扩展来快速完成)。
错误消息有时有点神秘，但它们总是相同的；)谷歌让他们得到解释或在此处询问 SO。

对于宽度问题，我为元素和父元素添加了不同的背景色，以便更好地查看哪一个不符合预期(以及哪一个只有 float 子元素，因此流中不再有实际内容因此没有高度因此没有可见的背景颜色...)。像浅蓝色、浅绿色、粉红色、浅黄色等这个和 MeasureIt! Fx 上的扩展。