CODEWITHSUNDEEP
htmlcss
robev
robev

Reputation: 1949

Align text next to a headline

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:

This is how I want it to look

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

Not looking right

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>

Upvotes: 1

Views: 292

Answers (3)

Thomas
Thomas

Reputation: 181785

Let's make the markup a bit more semantic first:

<dl class="about-facts">
    <dt>Profession:</dt>
    <dd>Studying Computer Science at Carleton University</dd>
    <dt>Experience:</dt>
    <dd>Resume</dd>
</dl>​

This requires changes to the CSS as well, of course. Because there's no longer a wrapping div, to get the border to extend all the way to the left we need to set padding-left not margin-left:

.about-facts dt {
    padding: 10px 0;
}
.about-facts dt {
    width: 100px;
    float: left;
    font-weight: bold;
}
.about-facts dd {
    padding: 10px 0 10px 120px;
    border-bottom: 1px dotted #aaa;
}

JSFiddle: http://jsfiddle.net/ekMZ6/1/

Upvotes: 2

phnkha
phnkha

Reputation: 7872

try this css

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

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

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Suggestions

  1. Add overflow: hidden; to the parent.
  2. Remove inline-block;.
  3. Add float and width to the .about-value.

Change CSS to include floats.

.about-fact {
    border-bottom: 1px dotted #aaa;
    padding: 10px 0;
    overflow: hidden;
}
.about-headline {
    width: 100px;
    float: left;
    font-weight: bold;
}
.about-value {
    float: left;
    width: auto;
}

Upvotes: 3

Related Questions