css div liquidlike/autoadjust size

Question

I want to make the container height be auto adjust if the contents overflow it will just go to the flow.

This is the code I have. site: Here

Just forget about the html and focus on css only the css is the one I got error.

.game_wrapper {
    width:210px;
    height:auto;
    position:relative;
    background:#fafafa;
    background:url(bg1.png);
    border:1px dashed #7f7f7f;
    padding:3px;
}

.game_container {
    width:90px;
    height:85px;
    border:1px solid #fff;
    float:left;
    margin:3px;
    text-align:center;
    -moz-box-shadow: 0px 0px 1px #000000;
    -webkit-box-shadow: 0px 0px 1px #000000;
    box-shadow: 0px 0px 1px #000000;
    border-radius:1px;
    padding:3px;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    position:relative;
    background:url(background.jpg);
    background-size:100%;
}

.game_container:hover {
    border:1px solid #c0c0c0;
}

.game_container img {
    width:100%;
    height:70px;
    -webkit-filter: brightness(110%);
    padding-bottom:3px;
    border-bottom:1px solid #afafaf;
    transition: all .2s;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    background:url(bg2.png);
}

.game_container:hover img {
    -webkit-filter: brightness(120%);
}

.game_container .name {
    font-size:10px;
    color:#0f5f5f;
    background:url(bg1.png);
}

.game_container:hover .name {
    color:#949400;
    font-size:12px;
}

.game_container a:link, .game_container a:visited {
    text-decoration:none;
}

.game_container .info {
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    border:1px solid #a0a0a0;
    text-align:justify;
    background:#01a2ff;
    border-color: #ddd;
    position:absolute;
    font-family:Verdana,Geneva,sans-serif;
    font-size:12px;
    color:#E0F7FC;
    height:120px;
    display:none;
    padding:10px;
    width:220px;
    left:110%;
    top:0px;
    z-index:1;
}

.game_container .info:before {
    content:'';
    position:absolute;
    left:-6px;
    top:15px;
    z-index:2;
    border-bottom:1px solid #a0a0a0;
    border-left:1px solid #a0a0a0;
    box-shadow-bottom: inset 0 1px 2px rgba(0,0,0,.07);
    box-shadow-left: inset 0 1px 2px rgba(0,0,0,.07);
    background:#01a2ff;
    height:10px;
    width:10px;
    display:block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.game_container:hover .info {
    display:block;
}

.game_container .info:hover {
    transition: all 0s;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0s;
    display:none;
}

.game_container .title {
    font-size:14px;
    color:#E0F7FC;
}

.game_container .description {
    margin-top:5px;
    color:#F2F9FE;
    font-family:Arial;
    font-size:10px;
}

Answer 1

Your Example Fixed

you need clearfix to the main wrapper

.clearfix:before, .clearfix:after { content:""; display:table; }  
.clearfix:after { clear:both; }  

/* IE 6/7 */  
.clearfix{ zoom:1; } 

add the class .clearfix the the main wrapper

<div class="clearfix game_wrapper">

More abouts clearfix http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

Answer 2

DEMO

Simply add the overflow:auto; to .game-wrapper

.game_wrapper {
    width:210px;
    height:auto;
    position:relative;
    background:#fafafa;
    background:url(bg1.png);
    border:1px dashed #7f7f7f;
    padding:3px;
    overflow:auto;
}