css - div 定位不当

Question

我在此页面上使用的方法与我在其他页面上使用的方法完全相同(效果很好)。所以我不确定哪里出了问题。我尝试了几种不同的方法，但似乎都不起作用。

显然我不能发布图片，因为我对这个很棒的网站还很陌生。我把它们放在那里以供查看。

第一张图片应该是这样的。

www.beerbattle.net/correct.png

第二张图片是它目前的样子。

www.beerbattle.net/incorrect.png

有问题的 HTML:

<div style="clear: both;">&nbsp;</div>
<div>
<form id=submit_msg>
    <fieldset>
      <legend>Processed</legend>
      <ol id=whatever>
         <li id=whatever>
Thank you for your Submission of [Anheuser-Busch, Inc. Budweiser American Ale]
     </li>
      </ol>
        </fieldset>
    </form>
  </div>

CSS:

form#submit_msg {
    background: #FBB62D;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: 95%;
}

form#submit_msg fieldset {
    border: none;
    margin-bottom: 10px;
}

form#submit_msg fieldset:last-of-type {
    margin-bottom: 0;
}

form#submit_msg legend {
    color: #b55100;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #a4a4a4;
}

form#submit_msg fieldset fieldset legend {
    color: #111111;
    font-size: 13px;
    font-weight: normal;
    padding-bottom: 0;
}

form#submit_msg ol li {
    background: #b9cf6a;
    background: rgba(255,255,255,.3);
    border-color: #e3ebc3;
    border-color: rgba(255,255,255,.6);
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
form#submit_msg ol ol li {
    background: none;
    border: none;
    float: left;
}

form#submit_msg label {
    float: left;
    font-size: 13px;
    width: 110px;
}
form#submit_msg fieldset fieldset label {
    background:none no-repeat left 50%;
    line-height: 20px;
    padding: 0 0 0 30px;
    width: auto;
}
form#submit_msg fieldset fieldset label:hover {
    cursor: pointer;
} 

感谢任何帮助。如果您需要更多信息，我可以为您提供网站的登录凭据以便实时查看

Answer 1

您的 HTML 中有几个错误。你的问题是你没有关闭你的一些 div 标签。修复这些，页面应该没问题。 Validator report

正确页面的 Dom 如下所示:

<div id="page-bgbtm">
    <div id="whitespace">
        <div class="content"></div>
    </div>
    <div id="sidebar"></div>
</div>

虽然不正确的是:

<div id="page-bgbtm">
    <div id="whitespace">
        <div class="content">
            <div id="sidebar"></div>
        </div>
    </div>
</div>

所以你可以看到侧边栏<div>在内容 div 中。