Родительский Div не будет расширяться по вертикали

Question

У меня есть родительский div (контейнер), у которого есть дочерний div (внутренний), который также имеет дочерние div, которые создаются динамически. Я использую jquery для горизонтальной прокрутки при переполнении из #inner. Моя проблема в том, что хотя я не хочу, чтобы #container расширялся по горизонтали, я хочу, чтобы он расширялся по вертикали, однако он не будет расширяться до полной высоты #inner. Я попытался добавить чистый div сразу после #inner, но это не сработало. Я также попытался изменить отображение для #container для отображения: inline и display: inline-block. Встроенный вертикально развернутый #container до нужной высоты, но в основном изменил переполнение на автоматическое, чтобы вы могли видеть горизонтальную полосу прокрутки внизу, даже если переполнение было скрыто. Моя цель - иметь вертикальную полосу прокрутки и не иметь горизонтальной полосы прокрутки, а #container вертикально развернуть до дочернего содержимого. Имеет ли это смысл? Вот моя разметка ...

<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>

и 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;
}

Заранее благодарю за любую помощь, B

Answer 1

Я думаю, что ваша проблема связана с использованием относительных позиций на ваших дочерних элементах.Если вы переключите их, чтобы использовать поля для позиционирования, контейнер будет содержать содержимое немного больше, чем вы хотите (я думаю).Дайте этому 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: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;
}