Aligning different font sizes on the same line of text so it looks nice?

Question

Basically, I want to have an h1 and a p element on the same line, but the alignment is off a lot (meaning the H1 is higher than the P and looks crappy) and I've never had to do anything like this with css before!

I've thrown together a jsfiddle to accompany this, here is the code:

<h1 style="float:left;display:inline;">"Hi!</h1><p style="float:left;display:inline;">I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1 style="float:left;display:inline">"</h1>

http://jsfiddle.net/9H8xE/

Thanks!

Answer 1

Some advice before answer:

1. P tag is meant to create a new paaragraph, so if you do not need that use span tag instead.
2. Try to avoid inline styles, use CSS selectors.

http://jsfiddle.net/9H8xE/1/

Try this and let me know if it works

HTML:

<h1 >"Hi!</h1><p>I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1>"</h1>

CSS:

p
{
    display:inline;
}
h1{
    display:inline
}

Answer 2

The technical problem with the code in the question is that float: left prevents display: inline from taking effect, setting display to block instead, so remove all the float: left declarations.

A different issue is that you have the closing quotation mark as the content of an h1 element after the p element. This is very illogical. The technical implication is that this character will appear in the font size of h1, causing uneven line spacing unless you set h1 font size to the same as p font size. You need to decide what you want: why would you want to a have a large-size closing quote after normal-size text, and if you do, how should it be rendered?