8

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
OptimusCrime
  • 14,662
  • 13
  • 58
  • 96

1 Answers1

20

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%.

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 1
    For the text-align to work you should set a width on the element, but any width will do, it does not necessarily have to be 100%. – Jan-Henk Oct 14 '11 at 10:58
  • @Jan-Henk Smaller widths won't produce the desired result. The OP requested a width which equals the size of an ordinary `div` element, which is `100%`. – Rob W Oct 14 '11 at 11:02
  • I just added this comment as a side note as to explain why the text-align property did not work, and that was because no width was set. You are right that the OP needs a width of 100%. – Jan-Henk Oct 14 '11 at 14:26
  • Is your fiddle supposed to show the solution? Because aligning text left doesn't work in your fiddle. – johny why Dec 31 '22 at 17:36