无法将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的工作方式，它们是块级元素。如果您不希望他们占用整个容器元素，您可以float或者inline-block

Answer 2

overflow: hidden;使用.main_div，以便您可以看到它正在调整大小但不隐藏内容。