Здравствуйте не пойму почему у меня блок #content_container не растягивается по высоте хотя высота у него указана авто? и блок #second_post_main выходит за его пределы, хотя должен просто его увеличивать?
<div class="wrapper">
<header class="header">
</header >
<div class="middle">
<div class="container">
<main class="content">
<div id="content_container">
<div id="first_post_main">
</div>
<div id="second_post_main">
</div>
</div>
</main><!-- .content -->
</div><!-- .container-->
<aside class="left-sidebar">
</aside><!-- .left-sidebar -->
</div><!-- .middle-->
</div><!-- .wrapper -->
<footer class="footer">
</footer><!-- .footer -->
.wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
/* Header
-----------------------------------------------------------------------------*/
.header {
}
/* Middle
-----------------------------------------------------------------------------*/
.middle {
margin-top:-40%;
width: 100%;
padding: 0 0 100px;
position: relative;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
}
.content {
padding: 0 0 0 375px;
}
#content_container{
top:-40px;
position:relative;
width:625px;
height:auto;
min-height:200px;
z-index:2;
}
#first_post_main{
position:relative;
background:#eee;
width:550px;
min-height:300px;
margin:0 auto;
top:50px;
}
#second_post_main{
position:relative;
background:#eee;
width:550px;
height:auto;
min-height:300px;
margin:0 auto;
top:50px;
}
/* Left Sidebar
-----------------------------------------------------------------------------*/
.left-sidebar {
margin-top:20px;
float: left;
width: 375px;
margin-left: -100%;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
position: relative;
}