Display: table and text-align right not working

Question

I've got a html-structure like this:

<div class="campain">
    <div class="campainText">
        <a href="#"><h2>Ny app til iPhone og iPad</h2></a>
        <a href="#"><h2>Tips og vinn</h2></a>
    </div>
    <div class="campainPicture">
        Picture goes here
    </div><div class="clear"></div>
</div>

And I'd like the campainText to be right-align. The css for this element is this:

font-family: 'Spinnaker', sans-serif;
font-size: 17px;
color: #FFFFFF;
background-color: #A2AD00;
display: table;
padding: 4px;
margin: 4px 4px 4px 4px;
text-decoration: none;

I know that the rest of the css is working. The problem is that the text is left-aligned if I include the table-option in the display-field. As soon as I remove this, it works as expected. Are there any workarounds for this, or do I have to use display: inline and <br /> tags?

Answer 1

Fiddle: http://jsfiddle.net/xbNCZ/

"Table + text-align:right does not work", because a table element doesn't stretch to the full width by default. Add width:100% to get the desired result.

Before / After setting width:100%.