Search code examples
csstextalignmentblock

How to align test in CSS

I am working on a chat and I have a problem with CSS.

This is how it looks like: https://i.sstatic.net/7v7vV.png

This is how I wish it to look like: https://i.sstatic.net/7v7vV.png

How do I do it?

Solution

  • I guessed at the markup but what about something like this - http://jsfiddle.net/YnPU2/?

    html:

    <p>
    <span class="time">20:20:20</span>
    <span class="author">quwquu</span>
    <span class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</p>
<p>
    <span class="time">20:20:22</span>
    <span class="author">dfghdg</span>
    <span class="text">when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</p>​

    css:

    p { overflow: hidden; vertical-align: top; }
p span { display: table-cell; }
p .time { width: 62px; }
p .author { width: auto; padding-right: 9px; }
p .text { width: auto; }​