无法将DIV调整为小于最大宽度的任何值

Question

快速CSS问题。我似乎想不出一个非常简单的CSS/HTML问题。这是一个JSFiddle。

http://jsfiddle.net/BmM6t/

基本上，这两个div的大小不会小于100%的宽度：

<div id="main_pic" class="main_div">
   THIS IS WHERE THE MAIN PIC WILL GO.
</div>
<div id="signin" class="main_div">
   SIGN IN TO THE SITE!
   <form>
       <label for="name">EMAIL/USERNAME:</label>
       <input type="text" name="name" id="name">
       <label for="email">PASSWORD:</label>
       <input type="text" name="email" id="email">
       <br />
       <input type="submit" value="Let's Play!">
   </form>
</div>

您将看到，带有类main_div的两个div实际上由于某种原因占据了整个屏幕的宽度(如果检查元素，就会看到这一点)，尽管它们的宽度写得很清楚。当你试图改变main_div的宽度时，它会改变宽度，但如果你检查元素，它只会改变对象的宽度，并在它周围添加填充，以确保它仍然占据整个屏幕的宽度。

我敢肯定是我弄错了，但是我找不到了。谢谢你的帮助！

Answer 1

这就是div的工作方式，它们是块级元素。

Answer 2

使用.main_div的overflow: hidden;，这样您就可以看到它正在调整大小，而不是隐藏内容。