Question

HTML:

<div content>
  <div post>
  <div post> 
  ...
</div>

CSS:

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

When #content is set to overflow:visible, it doesn’t fit to its content size i.e. each post is well displayed, but #content height is its min-height.

When overflow:hidden is set, #content adapts its size to its content, but the .post‘s are cut to the #content metrics. .post contains position:absolute elements located outside of .post with negative margins.

Can #content fit to .post‘s height and at the same time not cut it on the sides?

Answer 1

If you have things floated inside a container with a min-height property, it won’t expand. You need to clear the float on .post and then the container will grow as it’s supposed to.