Supported by :   My Law Forms Ltd. - Deed polls and Tenancy Agreements

Section titles – CSS text alignment

Often a designer will wish to have a section or paragraph title bar which contains two separate pieces of text displayed on one line. This may be a text title on the left and a date or time stamp on the right.

This can be accomplished very cleanly with a few CSS attributes applied to the following HTML :-

<h1><em>Section: HTML help</em> Date: 21st Apr </h1>

h1 { text-align: right; }h1 em { float: left; }

By using this simple approach it means that the content will still be displayed in the order it was intended to be viewed, even if CSS is not available or rendered correctly in the visitor’s browser. This approach also avoids the temptation to use tables or even floating div tags. By using the h1 (or h2, h3, et al) tag, the semantic nature of the content is preserved.

In a browser without CSS rendering the result will look something like this :-

Section: HTML help Date: 21st Apr

This result at least shows the content in the textual context that was intended. Although the design effect is lost the content remains intact. Aspects like this are key to making a web page as accessible as possible to all audiences.

Now, if we break a rule here and add that CSS style, inline with the tags, you can see the result here :-

Section: HTML help Date: 21st Apr

This entry was posted on Tuesday, April 3rd, 2007 at 3:02 pm and is filed under CSS Tips, HTML help, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.