Div有着莫名其妙的巨大利润空间？

Question

我有一个侧边栏div，由于某种原因有一个绝对巨大的右边距，我无法弄清楚为什么会发生这种情况。这会将浮动内容搞砸到我页面上的其他内容，需要你的帮助来弄清楚为什么会这样。

我已经检查了CSS的其余部分是否存在任何类型的冲突CSS，这些CSS可能会分配很大的余量，但似乎无法找到。

据我所知，其中一些是脱离背景但只是忍受我。

div

<div id="leftsidebar">
    <h2> Yesterday's Games </h2>
    <img src="images/dividerSmall.gif" />
    <div class="gamelist">
        **gamelist is populated by MySQL database**
    </div>
</div>

任何相关div的CSS

#leftsidebar {
    position: relative;
    padding-left: 10px;
    width: 225px;
    margin-right: 0px;
}

.gamelist {
    height: auto;
    width: 225px;
    padding-left: 20px;
    margin-top: -27px;
}

Answer 1

你没有在你的CSS中使用float。尝试使用即float:left;在#leftsidebar和.gamelist中。可能有帮助：）

Answer 2

通过查看您的CSS，#leftsidebar的实际宽度为235px（225宽度+10填充），.gamelist的实际宽度为245px（225宽度+20填充）。这是因为填充总是在总元素宽度中考虑。

因此，如果您使用这两个数字并抵消它们，您将获得.gamelist的20px溢出。为什么？由于.gamelist上的填充，#leftsidebar位于右侧10个像素。因此.gamelist的正确宽度应为205px（225宽度 - 20填充）。

有关更新的示例，请参阅http://jsfiddle.net/e8N5N/3/。