How to Align and Float Elements on a Web Page

The placement of items on a web page is essential to its overall design. Though there are other ways to influence the layout, such as to use tables (which we don't recommend), the best is to use CSS.

Below, we'll take a look at how to use a simple CSS style in-line property to align images, tables, paragraphs, and more.

Note: These same methods can be used on external style sheets too but since these apply to individual items and likely need to stay that way, it's best to use in-line styling like what's mentioned below.

Align Text Paragraphs

The paragraph tag is the first place to start in laying out your web page. It opening and closing tags look like this:


<p></p>

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 lets you align 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 paragraph text is "justify," which 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 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

However, 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 tag and the style property (float or text-align) 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 tag.