Question

My problem is that the nested div (‘content’) does not adapt his height following the real content, in this case my form. So the former div adapts his height but the latter div doesn’t do it. How can i resolve this?

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

The last input of your form is floated. Floated elements don’t stretch their parent’s height.

Adding this to after the form:

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