Align different font sizes on the same line of text so that it looks good?

Question

Basically, I want to have the h1 and ap element on the same line, but the alignment is too much (this means that H1 is above P and looks crap), and I never had to do anything like that from css to!

I put together 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 tips before answering:

• The P-tag is designed to create a new paaragraph, so if you do not need this span span tag.
• Try to avoid inline styles, use CSS selector.

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 the display: inline effect by setting display to block , so remove all float: left declarations.

Another problem is that you have a closing quote as the content of the h1 element after the p element. This is very illogical. The technical conclusion is that this character will be displayed in the font size h1 , which will lead to uneven line spacing if you do not set the font size h1 in the same way as the font size p . You need to decide what you want: why do you want to have a large closing quote after a text of normal size, and if so, how to do it?