HTML & CSS Comment List

Question

I have tried tried coding a comment list where the avatar is supposed to display on the left, and the name and comment are supposed to display on the right. Any help solving the issue is appreciated.

Outcome

Desired Outcome

enter image description here

HTML

    <section>
    <div class='friend'>
        <h3>John Smith</h3>
        <p>Just another 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 another 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 another 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;
}
    a {
    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;
    }

well, there's no bug from where I see it, your HTML+CSS is having the proper behaviour. The keyword here would be "float" ... try to help yourself first :-) — Laurent S.
– Laurent S., Commented May 21, 2013 at 17:31
Semantically speaking, a list of comments is exactly that, a list. You should consider wrapping your elements in list tags. Not necessary for the effect that you are going for; however, it is the correct way to list items. — FireCrakcer37
– FireCrakcer37, Commented May 21, 2013 at 20:22

lazyprogrammer · Accepted Answer · 2013-05-21 17:35:54Z

3

you would want to add float to your image
like

.friend img{
 float:left;
}

here's a fiddle

answered May 21, 2013 at 17:35

lazyprogrammer

6299 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Schleis · Accepted Answer · 2013-05-21 17:32:00Z

0

Float your h3 and p tags to the right.

.friend h3, .friend p {
    float: right;
}

Altneratively, have the image first and float it to the left.

http://css-tricks.com/all-about-floats/

https://developer.mozilla.org/en-US/docs/Web/CSS/float

answered May 21, 2013 at 17:32

Schleis

44.2k8 gold badges73 silver badges90 bronze badges

Comments

Joaquín L. Robles · Accepted Answer · 2013-05-21 18:07:56Z

0

I would recommend you to use inline-block instead of float in CSS with vertical-align, here you can see the result: http://jsfiddle.net/gG5uv/3/.

.friend img {
    height: 70px;
    width: 100px;
    display: inline-block;
    vertical-align: top;
}
.friend .data {
    display: inline-block;
    vertical-align: top;
}

I've also added a semantic separation between image and personal data of each item creating a div with class data.

answered May 21, 2013 at 18:07

Joaquín L. Robles

6,58411 gold badges73 silver badges108 bronze badges

Comments

AzAh · Accepted Answer · 2013-05-21 18:43:20Z

Hey You can check your solution here at http://jsbin.com/edit/637/. Just a few changes in your code.

HTML

<div class="friend">
  <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
                <div id="friend-bio">
                    <h4>John Smith</h4>
                    <p>Just another comment</p>
                </div>
</div>
<br>
<div class="friend">
  <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
                <div id="friend-bio">
                    <h4>John Smith</h4>
                    <p>Just another comment</p>
                </div>
</div>
<br>
<div class="friend">
  <img id ='friend-image' src='http://media.dunkedcdn.com/assets/prod/13/700x0-5_p17o72pss9bbmvuspb1gl61ot23.jpg'>
                <div id="friend-bio">
                    <h4>John Smith</h4>
                    <p>Just another comment</p>
                </div>
</div>

and CSS

.friend #friend-image {
    border: 1px solid #F0F2F8;
    display: inline-block;
    float: left;
    height: 85px;
    width: 84px;
}
#main #friend #friend-bio {
    float: left;
    font-size: 14px;
    margin: -7px 0 0 20px;
    width: 454px;
}
#main #friend #friend-bio h4 {
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 5px;
}

Collectives™ on Stack Overflow

HTML & CSS Comment List

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related