Inline Elements, Block Elements and Text Alignment

One thing that a lot of people new to CSS find confusing is how aligning of your web page content is supposed to work now that the HTML align attribute has been deprecated (meaning that it should no longer be used). Actually alignment is quite simple provided that you keep in mind that it works differently for different objects in your web page.

Inline Elements

As the name suggests, inline elements such as <span>, <q>, <strong>, and <em> occur inline within the text content of your web page. The size and position of inline delements ise determined by the placement of the content that contains them. You can use stylesheet commands to affect the appearance of inline elements but any stylesheet positioning commands will not affect inline elements directly.


Text in your web page is aligned using the text-align attribute. Valid values for the text-align attribute are left, right, center, and justify. The vertical alignment of text can be set using the vertical-align attribute and the word-spacing, letter-spacing, text-indent, line-height, and whitespace attributes can also influence how the text content on your page is aligned.

Note that all of these attributes apply specifically to text. These commands cannot be used to affect the alignment of anything except text. You also need to be aware that these commands affect the alignment of the text relative either to other adjacent text or to the block level element that contains the text Unless the block level element containing the text is centred on the page, centring the text within the block will not centre it within the page.

Block Elements

The first thing that you need to know about aligning block elements such as <div>, <p^gt;, and <blockquote> is that unless the block has a width specified for it, it will automatically fill the entire width of the web page and as such cannot be aligned at all. The other thing to remember is that (with the sole exception of Internet Explorer 5 that implemented the alignment commands incorrectly) the text alignment commands will have no affect on the alignment of a block element.

To align a block element to the left or right you use the float attribute. Floating an element moves the block to that side of the web page. If there are already floated elements on that side of the page then this block element will be placed adjacent to that element provided that it will fit, otherwise it will be placed under that element and moved to the edge of the page. The amount by which the block element is to be indented from the edge of the web page or the adjacent floated element is set using the margin attribute.

Block elements that are not floated will be positioned on the page in accordance with the margins that are defined for that element. To centre a block element we can therefore set the width that we want the block to have and then define the left and right margins to be auto which will automatically set the margin sizes so as to position the block in the centre of the page (except in IE5).

When positioning a block element that is not floated the positioning of any floated blocks are ignored and so the floated blocks will actually overlap the non-floated block unless the margins on the various blocks are such as to position them so that they don't overlap. This overlap is taken into account in the positioning of the content within the block though and the content of the non-floated block will flow around the floated block rather than appearing on top of it. Because the floated blocks are ignored when positioning the non-floated blocks, it is possible to have a centred block with text that is centred within it that actually appears to be lopsided due to a floated element overlapping on one side of the block with no corresponding overlap on the other. If what you actually require is to centre the content in the space excluding that taken up by the floated block ten you need to adjust the margins on the non-floated block so as to adjust its position so that it does not overlap the floated block.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow