Question

I have a dynamically appearing div on a page. I would like to be able to hide the div with a button at the top right corner of the div. One way I have found to do this is to use a p tag, like so:

<p dir="RTL">button</p>

If this is the first line of HTML within the div, it will put the button in the upper right hand corner of the div. However, it gives me a new line above and a new line below, so, the button isn’t really where I want it to be. The “dir” attribute doesn’t seem to work with a span tag, and if I display the p tag inline using css

p {
display:inline;
}

the button is no longer right aligned. Instead it stays in the left hand corner. Is there a way to get this button in the upper right hand corner without two unnecessary new lines and without a bunch of  ?

Answer 1

You have two options here:

1. Get rid of the margin on the p tag: p { margin: 0; }
2. Use a div instead of a p

Most browsers render paragraph tags with a 1em top and bottom margin.

As for your problems with the rtl property, what browser are you using? As far as I’m aware it should work fine with as long as the element is inline and you’re using the correct unicode characters.