using before and after css attribute

using before and after css attribute

I'm trying to figure on how use to after and before css properly and will
be applying the styles to this
http://i255.photobucket.com/albums/hh140/testament1234/after_zps006047f7.jpg
Basically the objective here is to fit the fixed width and height of box
inside of the parent box(Not sure if i said the correctly). The box inside
is going past or overflowing. How do i set the parent box to adjust no
matter how big the child box is. The child box i'm meantioning here is the
dark grey
<div class="connections-label">
<div class="connections-avatar">
</div>
<h3><a href="">Christian Blanquera</a></h3>
<h4>Invested over 5 million cookies in 20 startups</h4>
</div>
.connections-label a{color:#1c89cc; text-decoration:none}
.connections-label h4{color:#686868;
font-style:italic;
}
.connections-avatar{width:50px; height:50px; float:left;
background-color:grey; margin-right:10px}
.connections-label:after{content:"";}