css - 在内容之后调整嵌套的 div

Question

我的问题是嵌套的 div ('content') 没有根据真实内容调整他的高度，在这种情况下是我的表单。所以前一个 div 适应他的身高，但后一个 div 不这样做。我该如何解决这个问题？

HTML：

<div id='container'>
    <div class='content'>
        <form action="#" id="admin_form">
           <input type="text" class="input350" name="status" />
           <input type="text" class="input350" name="tlt" />
           <br>
           <input type="text" class="input350"  name="msg" />
           <input type="submit" class="input350" style="float:left;" value="Admin" />
        </form>
    </div>
</div>

CSS：

 #container
    {
        position: absolute;
        width: 900px;
        height: auto;
        border:solid 4px #1FC3D2;

    }

#container .content
    {
        position: relative;
        background-color: #EFEFEF;
        width: 898px;
        height:auto;
        border:solid 1px #000;
    }

Answer 1

表单的最后一个输入是浮动的。浮动元素不会拉伸其父级的高度。

将其添加到表单之后：

<div style="clear:both;"></div>

Answer 2

float:left从提交按钮中删除并添加此css

input[type="submit"]{
 display:block   
}

演示