text-align problem in Firefox

[king arthur]

Does anyone ever get heartily sick of trying to make CSS work the same across browsers? It's enough to make you scream sometimes.

Anyway, here it is:

I have four DIVs all relatively positioned one above the other.

First DIV is width:100%, height:auto, text-align:left. It contains a paragraph which is 768 pixels wide and has some text in it.

Below this is a DIV containing an image. The image is slightly rotated to the left, about 10 degrees. In the DIV above, I have put line breaks to line up the text along the slanted edge of the image. It all works great, it even looks right when sizing the browser window down and everything.

Under this I have a DIV which is width:100%, height:auto, text-align:right. It again contains a paragraph 768 pixels wide with some text.

Under this is another DIV with another image. This time the image is rotated right about 5 degrees.  Again, I have formatted the text in the DIV above to sit along the diagonal top edge of the image.

This all works great in IE.

In Firefox the second paragraph, which is supposed to be aligned to the right, is not. It sits at the left side of the screen. The text within the paragraph is right-justified, but the paragraph itself refuses to go to the right of the page. I can't figure out how to get it to go there. I've tried putting text-align:right in the paragraph style, I've tried putting align="right" everywhere, it refuses to budge. Both the DIVS stretch across the screen, I can verify that in the DOM inspector. The paragraph is the right size too, but it is completely in the wrong side of the page!

[johnnyk]

For the paragraph that you want to be at the right of the div and right-justified, use this CSS:

[code]
p {
text-align: right;
margin-left: auto;
}
[/code]

...plus whatever CSS you already have for it. The above will make it work in Firefox (and pretty much all browsers except IE), to make sure it also works in IE, keep "text-align: right;" in the CSS of the p's container div.

Just so you know, if something works in IE but not Firefox, it usually means that it only works in IE because of a flaw in IE. The above CSS is the correct way to do it, but IE only do what you want it to do if the container div has "text-align: right;" in it (which, in IE world, is the "correct" way to do it).

[king arthur]

Thanks. margin-left:auto, never would have thought of that one!