Get text on same line HTML/CSS

Question

How do I put the address on the same line as "contact me on:" ? I also want one space between them. I was thinking of using float, nut isn't that overkill?

<p>Contact me on: 
<address> 
<a href="mailto:me@gmail.com"> 
me@gmail.com
</address>
</a>
</p>

http://jsfiddle.net/tY9nS/

Thanks in advance

Answer 1

Change your html as like this '

<address> 
<p>Contact me on: <a href="mailto:me@gmail.com"> 
me@gmail.com</a></p>
   </address>

Don't** put the address tag in p tag put the p tag into address tag

demo

Answer 2

I'm not 100% sure why this is, but browsers don't allow an address tag in a p tag.

You can make this work, but you'll need to remove the p { width:100%}. The since browsers are setting the address and p tag one after the other, your p tag will consume 100% of the width, thus no more room for the address.

Change the styles to : p,address{ display:inline-block;} and it will work just fine

Answer 3

Another simple way would be to format it in a table like this:

<table>
<tr>
<td>Contact me on:</td>
<td><a href="mailto:me@gmail.com">me@gmail.com</a></td>
</tr>
</table>

Otherwise there's the more complicated options where you go into layout using div elements that you can find here: http://www.w3schools.com/html/html_layout.asp