CSS Positionning : container doesn't fit to its content size

HTML:

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

CSS:

.post {
    margin: 0; padding: 110px 20px 20px;
    flo开发者_高级运维at: 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?

---

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.

---

Is this what you're trying to do?

http://jsfiddle.net/k4t434sispho3nix/swwTn/

---

What do you think about this...

http://jsfiddle.net/UnsungHero97/dBMxE/2/

Try inserting more or taking out <div class="post"></div> elements.

I hope this helps.

---

Try changing container's overflow property to "auto"; it worked for me:

https://stackoverflow.com/a/17807687/888367