Cherryfield.net
Horizontal Alignment Tricks

The standard way of aligning text is to use the <P> tag with an ALIGN attribute.

Problem:  Sometimes you want to follow a paragraph with centered or right aligned text, but you want it to appear as part of the paragraph. You don't want the extra vertical space that would be generated if it appeared in it's own paragraph. Here's an example, which uses two paragraphs, the second right aligned:

It was on the 10th day of May--1884--that I confessed to age by mounting spectacles for the first time, and in the same hour I renewed my youth, to outward appearance, by mounting a bicycle for the first time. The spectacles stayed on.

— Mark Twain's Speeches

Depending on what else is on the page, you may think there is too much space between the quotation and the attribution.

Trick:  Instead of using <P> tags, put your text in a table. Don't try to put the table inside the <P> tags ... that's not valid ... it may look fine in some browsers, but other may display it in surprising ways (or not display some of it at all). Here's how it looks:

It was on the 10th day of May--1884--that I confessed to age by mounting spectacles for the first time, and in the same hour I renewed my youth, to outward appearance, by mounting a bicycle for the first time. The spectacles stayed on.
— Mark Twain's Speeches          

Play with the width of your browser window ... see how the page looks when the last line of the quote is short and when it fills most of the width of the window.

If you want to keep the right aligned text away from the edge of the window, follow the text with "&nbsp;  &nbsp;" spacing as was done here. Or, since you're inside a table, you could follow it with a small cell whose width is specified in pixels, or as a percentage of the width of the window (table) ... if you do this, the cell in the first row must span the cells in the second row.

To better see how this all works, view the source of this page. Use "View Source" whenever you see a page whose coding interests you. Also don't forget to use "Tidy" to verify your coding ... its easy to nest coding illegally when you start to get tricky. Tidy will find any errors you make. (You may not like what it does. The illegal coding may have looked great in your browser and its corrected version doesn't. But remember your illegal coding may cause real problems in some other browser ... we've seen the whole rest of the page disappear sometimes.)

You notice that like <P> tags, <TABLE> tags leave some vertical spacing before and after the table. If you don't want that spacing, include more text inside your table, i.e., start your table somewhere you do want vertical space. If necessary you can use the transparent image trick described in Vertical Spacing Tricks, placing the image in an otherwise blank row to better control the spacing. Note that this horizontal alignment trick was used to produce the center aligned text under Trick 2 of that lesson.

Be sure to view your pages in more than one browser. Internet Explorer and Netscape are the most frequently used, but Opera and Mozilla are gaining big followings.

Cherryfield.net Resources

Cherryfield.net
 
Visits since October 4, 2003: 
 
MainePages.com