6

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!

MrS1ck
  • 217
  • 4
  • 8
  • 23

2 Answers2

3

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
}
user2580076
  • 577
  • 2
  • 10
  • 1
    @MrS1ck is this what you were looking for? – user2580076 Jul 21 '13 at 23:12
  • 1
    Perfect! I'm mostly self taught, and didn't know that the difference between P and Span. Today I learned and it worked perfectly! THANK YOU! – MrS1ck Jul 22 '13 at 00:14
  • 1
    @MrS1ck you are welcome, if you have any other question Let me know :) – user2580076 Jul 22 '13 at 04:04
  • 1
    The text of the answer does not mention the real problem with the original code: `float: left`. The code given in the answer is essentially the same as in the question, just `float: left` omitted. – Jukka K. Korpela Jul 22 '13 at 05:29
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?

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390