Parent Div Won't Expand Vertically

I have a parent div (container) that has a child div (inner) which also has child divs that are dynamically created. I am using jquery to scroll horizontally on the overflow from #inner. My problem is that while I don't want #container to expand horizontally, I do want it to expand vertically however it won't expand to the full height of #inner. I have tried adding a clear div just after #inner but that didn't work. I also tried changing the display for #container to display:inline and display:inline-block. Inline vertically开发者_StackOverflow expanded #container to the proper height but basically changed the overflow to auto so that you would see the horizontal scroll bar on the bottom even though overflow was set to hidden. My goal is to have a vertical scroll bar and no horizontal scroll bar while having #container vertically expand to it's child content. Does that make sense? Here is my markup...

<div id="container">
   <div id="inner">
       <div class="post">
           <p>content</p>
       </div>
       <div class="post">
           <p>content</p>
       </div>
       <div class="post">
           <p>content</p>
       </div>
   </div>
   <div class="clear"></div>
</div>

and the css...

body {
    margin:0;
    padding:0;
    height: 100%;
    line-height: 1.2em;
    font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
    color:#E0DFE3;
    background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
    overflow:auto;
    border:#888888 solid 1px;
    margin:10px;
}
#inner {
    position:relative;
    top:100px;
 width:3600px;
    margin:0;
    padding:0;
}
.post {
    background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    width: 600px;
    padding: 20px;
    position: relative;
    top:50px;
    margin: 0 25px;
    float:left;
}
.clear {
    clear:both;
}

Thank you in advance for any and all help, B

I think your issue is coming from using relative positions on your child elements. If you switch them to use margins for positioning, the container will hold the content a little more like you want it to (I think). Give this css a shot!

body {
    margin:0;
    padding:0;
    height: 100%;
    line-height: 1.2em;
    font: normal 12px 'Helvetica','Arial','Verdana','sans-serif';
    color:#E0DFE3;
    background:#dad3c1 url(../images/duck-bg1500x.jpg) no-repeat fixed;
}
#container {
    overflow:scroll;
    border:#888888 solid 1px;
    margin:10px;
}
#inner {
    width:3600px;
    margin:0;
    padding:0;
}
.post {
    background:url("http://www.loodieloodieloodie.com/images/opac-bg2.png") repeat scroll transparent !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    width: 600px;
    padding: 20px;
    position: relative;
    margin: 50px 25px;
    float:left;
}
.clear {
    clear:both;
}