如何使用CSS使用其内容扩展div？

Question

I have a bunch of nested div's on this page. Each of them can only take content equivalent to their sizes, any more content that is added overflows into the next div. I would like to make #heading expand as i add more content in to it. Can this be done using CSS?.

<div id="heading"> 
     <form action="addplayer.php"method ="post" enctype="multipart/form-data">
         <img src="css/images/pid.jpg" alt="" /><br/> <input type="text" name="playerid" class="textbox"/><br/>
         <img src="css/images/name.jpg" alt="" /><br/> <input type="text" name="name" class="textbox"/><br/>
         <img src="css/images/age.jpg" alt="" /><br/> <input type="text" name="age" class="textbox"/><br/>
         <img src="css/images/position.jpg" alt="" /><br/> <input type="text" name="position" class="textbox"/><br/>
         <img src="css/images/nt.jpg" alt="" /><br/> <input type="text" name="nationality" class="textbox"/><br/>
         <img src="css/images/photo.jpg" alt="" /><br/> <input type="file" name="image" class="textbox"/>
     <input type="submit"  value="Upload"/>
     <form/>    
</div>

Answer 1

If you don't define width and/or height, the div element grows along with its content. Unless his content is set to absolute! If the content is set to float, you have to set to the container.

div{overflow: hidden;
    height: auto;
    }