Why can I not right-align an element with display: block and width: X?

css layout text-alignment
Dan Tao picture Dan Tao · May 8, 2012 · Viewed 24.5k times · Source

Total n00b question here (at least to the CSS elite):

Why is it that an element with both display: block; and a value for width does not seem to fall in line with the text-align property of its parent? That is, it always seems to insist on keeping to the left.

Here is a jsFiddle illustrating the issue.

Obviously, this must be consistent with the CSS spec (I mean, if Chrome, Firefox and Opera all agree on it, I have very little doubt); I just don't really get it.

Answer

michaelward82 picture michaelward82 · May 8, 2012

The text is aligned right inside a 150px box. That is correct. A block element will not align to text-align in the parent.

To fix this you need to use either display: inline-block or float: right on the .width div.

edit: with float, add clear: right to avoid it being on the same line as the previous div

Related questions

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Imagine a simple unsorted list with some <li> items. Now, I have defined the bullets to be square shaped via list-style:square; However, if I set the color of the <li> items with color: #F00; then …

Read More
CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More