Container div with gradient-background does not allow height: auto - css

Question

I'm trying to solve the following problem:
The outer div("container") doesn't allow height:auto and just hides the complete div with all the content - but I need the outer div to expand since this will be a dynamically filling list later on.
HTML
<div id="container">
<div id="headline">Headline</div>
<ul id="u_list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
#container {
width: 200px;
height: auto;
background-image: -webkit-linear-gradient(top, #333333 0%, #242424 100%);
position: absolute;
top: 82px;
left: 25px;
}
#headline {
display: block;
position: absolute;
top: 12px;
left: 12px;
color: white;
}
#u_list {
list-style-type: none;
position: absolute;
top: 20px;
left: 12px;
color: white;
padding-left: 0;
margin-top: 36px;
}
Any ideas what's going on there? :(
Kind regards

Answer 1

Try to remove position:absolute at #u_list and #headline
http://codepen.io/anon/pen/fFsvi
#container {
width: 200px;
height: auto;
background: #333333; /* Old browsers */
background: -moz-linear-gradient(top, #333333 0%, #242424 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#242424)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #333333 0%,#242424 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #333333 0%,#242424 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #333333 0%,#242424 100%); /* IE10+ */
background: linear-gradient(to bottom, #333333 0%,#242424 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#242424',GradientType=0 ); /* IE6-9 */
position: absolute;
top: 82px;
left: 25px;
}
I use this tool http://www.colorzilla.com/gradient-editor/ for gradient

Answer 2

Try below code:
#container{position:relative;}