Question

I’m sure this has been asked before but I’m not quite sure how to word my search.

I want to have a list of facts, with a headline on the left and the information on the right. This is what I have so far:

However, if I put too much text on the right, it doesn’t stay aligned right but goes under the headline.

How do I get the text to stay aligned on the right? Here is the CSS I’m using:

.about-fact {
    border-bottom: 1px dotted #aaa;
    padding: 10px 0;
}
.about-headline {
    display: inline-block;      /* Aligns the content to be the same */
    width: 100px;
    float:left;
    font-weight: bold;
}
.about-value {

}

Example HTML:

<div class="about-fact">
    <div class="about-headline">Profession:</div>
    <div class="about-value">Studying Computer Science at Carleton University</div>
</div>
<div class="about-fact">
    <div class="about-headline">Experience:</div>
    <div class="about-value">Resume</div>
</div>

Answer 1

try this css

.about-value {
    margin-left: 100px;
}​

Demo: http://jsfiddle.net/k4aQ5/