title: the ul-li elements styling is not correct
body: <p>Hi I am trying to build a list (code shared at: <a href="http://jsfiddle.net/jLM4J/" rel="nofollow">http://jsfiddle.net/jLM4J/</a>). </p>
  
  <p>My question is that though the list elements should not be overlapping, why is my list overlapping the first item, where I am trying to display the user details. </p>
  
  <p>Even if i replace the user li element with a separate div outside/inside ul(http://jsfiddle.net/yYEhS/1/), the ul list still keeps overlapping my element while it should not because my element is div which displays as a block.</p>
  
  <p>Can anyone please help as this is screwing my mind up.</p>