html - Using :before and :after attributes -

i'm trying figure on how use :after , :before css , applying styles this:

the objective here fit fixed width , height of box inside of parent box (not sure if said correctly).

the box inside going past or overflowing.

how set parent box adjust no matter how big child box is? child box i'm mentioning here dark grey box.

<div class="connections-label">     <div class="connections-avatar"></div>     <h3><a href="">christian blanquera</a></h3>     <h4>invested on 5 million cookies in 20 startups</h4> </div> 

.connections-label  {     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:""; } 

you're looking css clearfix solution. basically, floated elements removed normal flow of document, , must contained. simplest clearfix apply overflow: hidden; element containing floated element:

.connections-label {   overflow: hidden; } 

this sufficient float containment scenarios. however, positioned elements , overflowing content clipped css. more complex clearfix contain floated elements without hiding positioned elements documented @ article above:

.connections-label:before, .connections-label:after {   content: '';   display: table; } .connections-label:after {   clear: both; }  /* ie6/7 support */ .connections-label {   display: inline-block; } .connections-label {   display: block; } 

also, trick learned applying overflow: hidden; element on left or right of floated element keeps element wrapping below floated element. it's easier see describe, check out jsfiddle demo.