Basic Web Page Layout

Placement of items on the page is essential to Web page design. There are many ways to affect the layout of your page. The best method is to use CSS to style your layout. A popular, but outmoded method is by using tables. I'll show you how to use a simple CSS style property to align your images, tables, paragraphs and more.

Align Text Paragraphs

The paragraph tag <p></p> is the first place to start in laying out your Web page.

The default alignment of text in a paragraph is to the left side of the page, but you can also align your paragraphs to the right and center.

<p style="float: right;">

Using the float property, you can align your paragraphs to the right or left of the parent element. Any other elements inside that parent element will flow around the floated element. To get the best effect with a paragraph, it's best to set a width on the paragraph that's smaller than the container (parent) element.

<p style="float: left; width:150px;">

Align the Text Inside Paragraphs

Arguably, the most interesting alignment for text in paragraphs is "justify". This tells the browser to display the text aligned, essentially, to both the right and left sides of the window. To justify the text in a paragraph, you would use the text-align property.

<p style="text-align: justify;">

You can also align all the text inside a paragraph to the right side or the left (the default), using the text-align property.

<p style="text-align: right;">

The text-align property will align the text inside the element. Technically, it's not supposed to align images that are contained inside the paragraph or other element, but most browsers treat images as inline for this property.

Aligning Images

Using the float property on an image tag <img> you can define the placement of images on the page and how the text will wrap around them.

Just like the paragraphs above, the float style property in the image tag will position your image on the page and tells the browser how to flow text and other elements around that image.

<img src="image.gif" alt="image" style="float: left; width:10px; height:50px; border:0;" />

Text following the above image tag will flow around the image to the right as the image displays to the left of the screen If I want the text to stop wrapping around the image, I use the clear property.

<br style="clear: left" />

Aligning More Than Paragraphs

But what if you want to align more than just a paragraph or an image? You could simply put a style property in every paragraph, but there is a tag you can use that is more effective: <div></div>

Simply surround the text and images (including HTML tags) with the <div></div> tag and the style property (float or text-align) on it and everything in that division will be aligned how you'd like it. Keep in mind that alignments added to paragraphs or images within the division will be honored, overriding the <div> tag.