css div liquidlike/autoadjust size - html

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