Question

I’m building a website that displays a vertically stacked list of comments that are placed by users.
The text should appear in a text balloon that basically displays the name of the user, there under the text and finally in the text balloon footer, it shows two links and floated to the right, a time stamp.

Since design/layouts are not my thing, it took me some painful days to achieve this in pure CSS (requirement) and I managed to make the list appear very neatly. For that I have tried to study the CSS that Google and Twitter use to show resp their video’s and Tweets and try to extract some useful stuff from it. However, I noticed their CSS’s and HTML are huge and I’m questioning if they did it the “right” way or if they found out that was the only possibility in order to make it display well on all types of devices. (Can somebody shed some light on that perhaps?) Conclusion is that it was not very useful for me.

However, the result doesn’t feel good and is very “touchy” (not flexible at all); for instance, when I resize my window or open the page on my tablet, it just looks disgusting; text block wrapped and displayed under the avatar image…

Question 1: as I mentioned, I have been looking /studying a lot by looking how the big sites (such as YouTube, Twitter and FaceBook) doing similar things and the HTML/CSS looks a bit messy in my opinion. Anybody sharing that thought/opinion?

Question 2: can someone provide me a with good starting point, i.e. HTML/CSS Example (preferably in a JSFiddle or so) for the following:

Some remarks:

• No images should be used (expect from the avatar image offcourse)
• No tables should be used; only Div’s and/or HTML-5 sementics (such as header, footer, article, and so on)
• The CSS/HTML layout should be that flexible that it adjust itself properly. On the image you can how I would like to have it displayed in different scenarios.
• Should display well in latest version in IE, FireFox, Safari and Chrome.

Answer 1

Given the following mark-up:

<div class="wrap">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="comment" data-owner="Dexter">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
        <ol class="postscript"> <!-- links and timestamp -->
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="date">3 days ago</li>
        </ol>
    </div>
</div>​

And the following CSS:

div.wrap {
    width: 90%;
    margin: 0 auto 1em auto;
    position: relative; /* the image will be absolutely-positioned relative to this */
}

div.wrap:first-child {
    margin-top: 1em; /* just for aesthetic reasons, adjust or remove, to taste */
}

div.comment {
    font-size: 1em;
    position: relative; /* the arrow on the left side of the div positioned relative to this element */
    margin-left: 60px; /* allows a 10px gutter for the arrow to fit into */
    border-radius: 0.75em 0.75em 0.75em 0.75em;
    background-color: #ccc;
    line-height: 1.4em;
    font-family: Helvetica; /* or whatever... */
}

div.comment::before { /* requires a fairly modern browser */
    content: attr(data-owner); /* displays the name of the comment-owner */
    border-radius: 0.75em 0.75em 0 0;
    background-color: #ccc;
    display: block;
    text-indent: 10%; /* adjust to taste */
    border-bottom: 3px solid #999;
}

div.comment::after { /* again, requires a fairly modern browser */
    content: ''; /* this property is necessary, even if only an empty string */
    position: absolute;
    top: 50%;
    left: 0;
    border: 10px solid transparent;
    border-right: 10px solid #ccc; /* forms the 'arrow' */
    margin: -10px 0 0 -20px;
}

div.comment p { /* or whatever, adjust to taste */
    width: 80%;
    margin: 0 auto 1em auto;
    padding-bottom: 1em;
}

img {
    position: absolute;
    top: 50%;
    width: 50px;
    float: left;
    border-radius: 10px;
    margin-top: -25px;
}​

p + ol.postscript {
    width: 80%;
    font-size: 0.8em;
    margin: -0.5em auto 0 auto;
}
ol.postscript::after {
    content: '';
    height: 0.5em;
    display: block;
    clear: both;
}
ol.postscript li {
    float: left;
    margin-right: 0.5em;
}
ol.postscript li.date {
    float: right;
    margin-right: 0;
}

.wrap a:link,
.wrap a:visited {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.wrap a:hover,
.wrap a:active,
.wrap a:focus {
    color: #f00;
    border-bottom: 1px solid #f00;
}​

JS Fiddle demo.

---

Edited in response to the valid comments, left below:

• I don’t think screen readers reads attributes which means it would probably be better to put the content of data-owner inside its own element, instead of an attribute.

• One quibble (as noted above too) [Screenreaders will not read CSS generated content](One quibble (as noted above too) Screenreaders will not read CSS generated content and the comment author seems to me to be an essential bit of content that should be accessible to screenreader users.) and the comment author seems to me to be an essential bit of content that should be accessible to screenreader users.

Given the sound advice, I’ve replaced the .comment::before element, adding a discrete h2:

<div class="wrap">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" />
    <div class="comment" data-owner="Dexter">
        <h2 class="owner">Dexter</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus lacus, blandit sit amet iaculis sodales, eleifend ut massa. Mauris arcu felis, facilisis sed bibendum et, tristique tincidunt dolor. Cras a hendrerit nisl. Maecenas accumsan, urna at aliquam blandit, ipsum erat pellentesque urna, et interdum mauris lacus et tellus.</p>
        <ol class="postscript">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="date">3 days ago</li>
        </ol>
    </div>
</div>

and appended the following CSS (in place of the original .comment::before):

div.comment p {
    width: 80%;
    margin: 0 auto 1em auto;
}

Revised JS Fiddle.