Question

This should be interesting. Here’s what I’m trying to do with CSS:

1. The words “An Example Alignment” should be in a single <h1> element.
2. The word “Alignment” should be on the second line (easy with a <br /> tag).
3. The word “An” should be smaller than the other words (easy with a <span> tag).

So we have:

<h1><span>An</span> Example <br />Alignment</h1>

But here’s the catch:

• I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that’s where I run into problems.

Here’s what it should look like: http://jsfiddle.net/Baumr/H2Pzr/

But that’s an ugly solution as there are two <h1> elements.

Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.

P.S. I could also put “An” into a separate <span>, but I would prefer to keep everything in a single <h1>.)

Answer 1

I would use two span classes in the same H1 tag:

<h1>
    <span class="small-text">An</span> Example 
    <span class="line-two">Alignment</span>
</h1>

Then update your CSS accordingly:

h1 {
    font-size: 30px;
}

span.small-text {
    font-size: 20px;
}

.line-two{
    display:block;
    margin-left: 31px;
}

You don’t even need the <br /> since you can just display the second span as display:block;
Updated fiddle here: http://jsfiddle.net/H2Pzr/6/