HTML & CSS Comment List -


i have tried tried coding comment list avatar supposed display on left, , name , comment supposed display on right. solving issue appreciated.

outcome

desired outcome

enter image description here

html

    <section>     <div class='friend'>         <h3>john smith</h3>         <p>just comment</p>         <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>     </div>     <div class='friend'>         <h3>john smith</h3>         <p>just comment</p>         <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>     </div>     <div class='friend'>         <h3>john smith</h3>         <p>just comment</p>         <img src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>     </div> </section> 

css

  body {     font: 14px/20px 'helvetica neue', helvetica, arial, sans-serif;     color: #333; }     {     color: #333;     text-decoration: none;     }      h1, h2, h3 {     font-weight: 400;     }      h1 {     font-size: 30px;     }      h2 {     font-size: 24px;     }      h3 {     font-size: 20px;     }      img {       height: auto;       width: 100%;     }      section {     padding: 30px 60px;     }      .friend img {     height: 70px;     width: 100px;     display: block;     } 

you want add float image
like

.friend img{  float:left; } 

here's fiddle


Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -