aligning text

how NN and IE handle aligning text

07/10/00

page 2 of 2

• page 1
  • centering text with colored divs
• page 2
  • left alignment with colored divs
  • right alignment with colored divs
  • more right alignment with colored divs

left alignment with colored divs

Let's try moving text to the left or right of a div box. Below is the code for the div box. We'll set the TEXT-ALIGN property to LEFT.

<div style="background:red;width:2.5in;border-width:1px;
    border-color:white;text-align:left">
      here is some text
</div>

We get in NN4.7, NN6.0 and IE5.0 a red colored div box that is aligned to the left of the page with the text inside aligned to the left. But is this just the default behavior of the three browsers? Let's change the TEXT-ALIGN property to RIGHT and see what happens.

In NN4.7 and NN6.0 and IE5.0 we see:

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

NN4.7 moved the DIV to the right of the page and did not move the text in the DIV, which is still aligned to the left side of the colored area. IE5.0 and NN6.0 did not move the DIV but instead aligned the text in the DIV to the right side of the colored area, which is expected.

Let's try directly aligning the DIV itself. We'll take the above code example and add the property ALIGN with the value LEFT. What we will try to do is explicitly align the DIV to the left side of the page but the text in it to the right of the DIV area. Maybe then we can get NN4.7 to act like IE5.0.

The results? In NN4.7 the colored div area is aligned to the center of the page with the contained text is aligned left. There is no effect in IE5.0 or NN6.0.

right alignment with colored divs

So far IE5.0 and NN6.0 are responding as expected. They have successfully aligned the DIV area to the left as we requested and aligned the text within to the right in the DIV area as we requested. But what if we try aligning the DIV to the right of the page and the contained text to the left in the DIV box?

Let's set the TEXT-ALIGN property to LEFT and the ALIGN property to RIGHT. This is exactly opposite of what we had before. We're now looking for the DIV to go to the right side of the page and the text within the DIV to be aligned to the left side of the colored div area. The code is below.

<div style="background:red;width:2.5in;border-width:1px;
    border-color:white;align:right;text-align:left;">
      here is some text
</div>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

IE5.0 and NN6.0 simply have the text and the DIV element aligned to the left. NN4.7 has aligned the DIV element to the right and the text to the left in the DIV element as we requested.

more right alignment with colored divs

So far IE5.0 works great with aligning DIVs to the LEFT with text to the RIGHT, and NN4.7 works great with aligning DIVs to the RIGHT and text to the LEFT. The last thing to try is aligining both the DIV and the text within the DIV to the right. The code is below.

<div style="background:red;width:2.5in;border-width:1px;
    border-color:white;align:right;text-align:right;">
      here is some text
</div>

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

NN4.7 has moved the DIV to the right but is still aligning the contained text to the left. IE5.0 and NN6.0 have not moved the DIV to the right but has aligned the text within to the right.

I this point I set the POSITION property to the value RELATIVE. I already knew that one can't move a DIV a certain length to the right (either in pixels or percentages) without the POSITION property set to RELATIVE. Maybe it would work here. It did not.