2

I'm sure this is a very simple thing but I've been banging my head against it all day, so I decided to just ask.

I have some divs that I would like to align to the right within their parent div. "text-align: right" works if I don't specify a width:

<div style="text-align: right;">
    <div>
        This text aligns to the right
    </div>
</div>

But if I put a size in pixels on the inner element, it does not:

<div style="text-align: right;">
    <div style="width: 200px;">
        This div stays on the left
    </div>
</div>

What am I missing?

felwithe
  • 2,683
  • 2
  • 23
  • 38

2 Answers2

6

Actually, text-align affects the inline elements including the text.

From the MDN

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

In the first case, the inner div inherits the text-align property from the outer div and applies that to its inline elements,

I.e The inner div is not aligned itself to the right or left. But as it fills the entire horizontal space of its parent, you'll see the text is aligned at the right side of the outer div.

In the second case, the inner div has an explicit width and it doesn't fill the entire horizontal space of its parent anymore, and the text-align is applied to the text not the div itself.

If you want to move the inner div to a side. You have two choice:

  1. Use float: right for the inner and clear the float at the end of the outer div. Working Demo

  2. Use display: inline-block for the inner and text-align: right for the outer div.
    Working Demo.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • @felwithe It's required for the parent to take the height of the floated children. It's a good practice which prevents the unexpected issues. For further info you can refer [this answer](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734). – Hashem Qolami Mar 06 '14 at 22:32
  • 1
    Thanks very much. After experimenting with both, I've decided to use the inline-block method because it's more flexible. – felwithe Mar 08 '14 at 14:37
2

The text in your second example is indeed aligned to the right. The problem is that its containing element is given a specific width so it is aligned to the right of the div with the specified width.

I believe you are looking to float the inner div element to the right since text-align does not apply to block-level elements:

<div style="text-align: right;">
    <div style="width: 200px; float: right;">
        This div does what I want!
    </div>
</div>

In the above code, text-align: right, could also be applied to the inner div and achieve the same result (unless there are other inner elements that need the CSS).

Here is an example of all three methods: http://jsfiddle.net/6KDC4/

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • @NickySmits I'm not sure I follow. That could definitely have value when using floats but how does it pertain to this answer? – Jasper Mar 06 '14 at 21:41
  • If that
    is not added, the container has no height because all the elements within are floating. most times this is not what someone wants. if the background came from the container, the background wouldn't be visible on its child divisions     – Nicky Smits Mar 06 '14 at 21:45
  • This is what I was looking for, thanks! I thought float was only used to position elements relative to one another (as in, if I wanted two divs side by side), that was my confusion. I am not great with CSS. In my day we used tables and we liked it. – felwithe Mar 06 '14 at 21:47