Помоги с расположением
 

Есть блок и он как-то не так отображается, т.е все элементы в главном div должны быть в рамке , а они выходят за его пределы. Это я как понял из-за align='left' и float='left', нельзя ли это как нибудь исправить?

<div style="position: relative; width: 75%; padding: 2%; margin: 0 auto; margin-top: 10%; border: 1px dotted #d3d3d3">
<img src="http://www.ledr.com/colours/blue.jpg" width="30%" align="left">
<span style="background-color: #61A6FF; padding: 2%; float: left">
    Пех Пехович
</span>
</div>

overflow: hidden главному блоку или
.clearfix класс ему же

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