div overlaying on text p tag

Question

Я создал этот jsFiddle, и мне захотелось узнать, как я могу настроить тег <p> внутри div, чтобы высота была отрегулирована на основе текста внутри, а не для того, чтобы он скрывался за другим div.

http://jsfiddle.net/qGzer/

<div class="nameImage"> 
    <div class="gridLetter"> 
      <div>A</div> 
     </div> 
     <figure class="thumbnail avatar circularGridVw"> 
      <img alt="Gravatar" src="http://www.gravatar.com/avatar/4425027572854858d9ebc2fe1c2fd847?s=150&amp;d=identicon&amp;r=G"> 

     </figure> 
     <p>Jackie ThunderBirdies James</p> 
    </div> 

Answer 1

добавьте в CSS из DIV

position: absolute; 



.gridLetter { 
font-size: 20px; 
font-weight: bold; 
margin-top: 4px; 
display: block; 
height: 17.7px; 
    position: absolute; 

} 

http://jsfiddle.net/qGzer/1/

Answer 2

В вашем DIV вы ограничиваете высоту

Answer 3

Привет Просто установите в height:auto. Смотрите здесь ваш код http://jsfiddle.net/qGzer/23/

.nameImage { 
    width:158px; 
    height:auto; 
} 

Также я установил float:left в display:inline-block резервировать места в случае различных высот дивы.