CSS comments layout

Question

I want to make a CSS layout for comments.

So basically a comment block consists of 3 parts:

User photo on the left
Comment header (consisting of user name floated left and comment data floated right)
Comment body (floating user photo)

http://dabblet.com/gist/10660127 this is what I have so far. The problem that I cant make a proper comment heading. Obviously I want to align it properly, like if I put many brs after .comment-title (but not the best solution, here I show the desired result: http://dabblet.com/gist/10660333).

Any good solution for that markup?

Grim... · Accepted Answer · 2014-04-14 15:57:53Z

1

You need to add clear: both (or maybe clear: right, depending on how it behaves with the avatar image) to your body class.

You can give it some padding-top, too.

answered Apr 14, 2014 at 15:57

Grim...

17k7 gold badges47 silver badges62 bronze badges

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

1 Comment

Victor Over a year ago

It almost worked. Look what I have: oi58.tinypic.com/zn1uuo.jpg . The problem is that the comment text is also floating the comment title or kind of. I tried to add margins but it didn't work properly :(

Bill Criswell · Accepted Answer · 2014-04-14 16:01:05Z

0

I believe you're just looking to float user-photo left? Here's what I came up with real quick: http://dabblet.com/gist/10661017

answered Apr 14, 2014 at 16:01

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

3 Comments

Victor Over a year ago

I have float:left in .user-photo. I want the data to be floated to right, and when I do it the main text goes between comment title and data

Bill Criswell Over a year ago

Instead of floating it right you can use a margin-left like this: dabblet.com/gist/10661626

Victor Over a year ago

Not sure if you got me right, but the Grim... answer looks the right one. Look what I want: dabblet.com/gist/10661782 . After adding clear:right to the body class I have by comment title (username + date) the way I want to.

Andre Figueiredo · Accepted Answer · 2014-04-14 16:13:39Z

0

Separate left content from right content explicitly: user-photo | user-info.

Apply margin-left: width(.user-photo) + some px

Make .title display: table

See example in Fiddle

HTML:

<div class="user-photo"></div>
<div class="user-info">
    <div class="title">
        <h3 class="pull-left">User name</h3>
        <h3 class="pull-right">11.02.2014</h3>
    </div>
    <div class="body">  
    Aenean vel ornare sapien. Suspendisse cursus pulvinar mattis. Donec magna odio, feugiat sed blandit vitae, fermentum eget ante. In iaculis nulla pretium malesuada porttitor. Ut adipiscing purus at pulvinar ultricies. Vestibulum lacinia erat felis, vitae faucibus justo dictum quis. Proin at erat ut turpis mollis aliquet. Aenean ornare nunc non elit sodales bibendum. Donec ac blandit turpis. Nunc faucibus in sapien in vehicula. Sed quam arcu, bibendum in imperdiet consequat, suscipit quis metus. In non est porttitor, adipiscing justo vitae, tempus nisi.
    </div>  
</div>

Diff CSS:

.comment .user-info {
    margin-left: 120px;
}

.comment .title {
    display: table;
    width: 100%;
}

answered Apr 14, 2014 at 16:13

Andre Figueiredo

13.5k8 gold badges52 silver badges75 bronze badges

1 Comment

Victor Over a year ago

This is great except that I wanted to comment text really float the picture like oi62.tinypic.com/mucqkl.jpg here. I've already tried to break the comment into two parts using margin-left but in this case the text won't actually float the picture

Collectives™ on Stack Overflow

CSS comments layout

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related