Question

I’ve made this html box, that is supposed to have a title and some buttons on right,

http://jsfiddle.net/vqpmt/17/

Everything seems fine except that the edit button as you can see is a little bit below the title, that shouldn’t be the case they should both be at the same exact level.

How do I achieve that, and is my code a mess? Is there a better way of doing something like this?

Answer 1

I moved h1 and the edit link tag inside a div container. Check my version of your code here

To be on the exact same level, the html elements has to be either inside a container (as in my fiddle) or should use 2 inline html elements.

Try reading w3schools on html and css which has lot of information that you can learn in short time.

w3schools HTML reference here

w3schools CSS reference here

Edit: h1 is a block element which means it will add a new line. So I added a new css style .inline and changed the block property to inline.

.inline { display: inline }