Auto height on element with only relatively positioned children

Question

As you can see here you need to apply a static height to #wrapper because else the div won't contain its children. (here is the fiddle ) This is quite logical. I would want, however, that I can give #wrapper an auto height by which it can contain multiple rows of relatively positioned elements.

I suppose I could add an other wrapper around the individual items and position them staticly? But I would prefer to not add more HTML. If needed a JS/jQuery solution is possible.

Answer 1

There is an float is your child DIV's so you have to clear it's parent & remove height from it. write like this:

#wrapper {
    background-color: white;
    min-height: 360px;
    margin: 50px auto;
    overflow: hidden;
    padding: 10px;
    width: 1008px;
}

Check this http://jsfiddle.net/y5nYN/16/