bottom align text in div with floated H1?

Question

I have a block of text, and inside the block I have an h1 tag floated left. I would like the first line of text to align with the bottom of the first line of text.

Here is the sample site:

http://myhealthsense.abyteshosting.com/

The block in question is the block under the header that says "Welcome! I am a..."

I want the 'Welcome!' to have it's bottom aligned with the rest of the sentence, and for the next line to wrap under the 'Welcome!'. As it is now, there are two lines wrapped to the right of 'Welcome!'.

Of course I could do this easily if all the text was together in a line, and I could use spans to set the sizes. But, since this is all generated out of drupal, the content comes as it is. In other words, the text in the block comes from the database, and is generated in a div, but the 'welcome!' has to be in the template. If I put it in the content div, my user will mess it up every time they edit the content.

Any hints are appreciated.

Answer 1

You could put your text in <p></p> and specify display:inline; for both h1 and p. IE:

<h1>Welcome!</h1><p>Mytext here</p>

Then a float is unnecessary.

Answer 2

The <h1> is semantically incorrect for this usage. <h1> is a semantic tag used to indicate the title of an article or primary section of content. In this case you are attempting to use the <h1> tag to alter the presentation of the text rather than the purpose of it. For this, you would be better served by using the span tag and assigning a class style:

<p><span class="welcome">Welcome!</span> blah blah blahbitty blah</p>

Different idea:

Add a line-height to the first line of your paragraph tag to be equal to your Welcome line's expected height:

p:first-line 
{
    line-height: 1.5em;
}

This might cause an odd space in some browsers I think (I haven't tried it out yet).

Another idea:

You could add a style with top-padding to the block element you're using for your primary content area. This would prevent text from starting until it is ready to start. Keep in mind this approach adds this padding to the overall size of the block element, so a block element with a height of 100px and a top padding of 20px will actually be 120px.