Manipulating HTML Alignment: How to Float HTML

Manipulating HTML Alignment: How to Float HTML

Figuring out how to put left-aligned, centered, and right-aligned text along a single line, as in the example below, can be a bit of a head scratcher when you’re learning HTML.

A table with three cells is a possibility. But the powers that be (the World Wide Web Consortium) don’t recommend using tables for anything other than tabular data. So what’s the alternative? Here we’ll show you how to float HTML with CSS.

Here’s an example:

Notice that the tags for both floating elements are above the tags for the centered element. A common mistake is to put the div with “float:right last.” That won’t work because “floats” float next to subsequent content in the page.