Code Snippet:
<div content>
<div post>
<div post>
...
</div>
Styling:
.post {
margin: 0; padding: 110px 20px 20px;
float: left;
width: 560px;
position: relative;
display: block;
}
#content {
display: block;
padding: 15px;
overflow: visible // hidden
min-height: 250px;
}
Setting #content to overflow:visible results in its height not adjusting to fit its content, while each post is well displayed. However, #content remains at its min-height.
On the other hand, when overflow:hidden is applied, #content adjusts to its content size, but the .post elements get cut according to #content dimensions. Inside .post, there are position:absolute elements positioned beyond .post with negative margins.
Is there a way for #content to adjust to the height of .post without cutting it off on the sides?