html - 在特定窗口宽度处向左浮动中断

Question

有一段时间弄清楚哪里出错了。

我有一段HTML代码:

<div id="content">
    <section style="float: left; width: 245px; height: 90%; padding: 0px 0px 0px 0px;">
        <div>
            <br />
            <img src="/images/" />
            <font style="font-size: 1.5em; font-weight: bold; font-style: italic;">Operations</font>
            <ul>
                <li style="padding-top: 5px;"><a href="/">Home</a>
            </ul>
            <ul><li style="padding-top: 5px;"><a href="/viewsop/op">SOP</a><li style="padding-top: 5px;"><a href="/viewssop/op">SSOP</a></ul>
        </div>
    </section>
    <section style="margin-left: 250px; height: 100%; margin-right: 20px; padding: 0px 10px 0px 10px;" id="pagewindow">
        <br />
        <center>
            <span class="pagetitle" id="pagetitle">
                Operations
            </span>
            <hr />
        </center>
            <div class="pagebody" id="pagebody">
                Operations Main Page
            </div>
    </section>
</div>

正确的样子:

但是当我达到一定宽度时，它会跳转到:

我已经检查了所有@media 语句，没有一个在发生这种情况的地方有断点。

我的内容 CSS:

#content {
  padding: 0px 5px 20px 5px;
  height: 775px;
  max-width: 1335px;
}

我不知道还有什么地方可以看。有什么建议吗？

Answer 1

找到我的问题。它甚至不在我想的范围内。我刚开始删除代码段，直到错误消失，然后开始将其重新添加。

我有一个 header div 是 29px 高，我最近添加了一个 image 作为“主页”的链接。原来那张图片是 35px 高，所以最终流过 header div 并搞砸了它下面的 div，我认为是坏了。

只是去展示，在 HTML 和 CSS 布局中，如果有错误，请到处查看