Floated elements can be positioned in a variety of ways. They can be adjacent to one another—this is used in columns and is the most common way to achieve columnar layouts. In the text below, the image in paragraph 1 is positioned inside the text and then floated for a different look. The bordered paragraph 2 is between paragraphs 1 and 3. It is right-floated so that the paragraphs above and below will flow around it.
The following rules are applied to the elements in the following paragraphs.
#f_left {
float: left;
margin: 0.5em;
padding: 0.5em;
}
#aside {
float: right;
width: 20em;
margin: 0 1em 1em;
padding: 0.5em;
border: 1px solid;
text-align: justify;
}
Paragraph 1 The image in this paragraph has the
ID "f_left".
... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec iaculis felis.
Sed pulvinar diam et nulla.
Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo.
Morbi neque ante, pharetra et, pulvinar ac, facilisis a, augue.Donec sagittis tortor eget libero fermentum dignissim. Quisque et lorem. Fusce et ipsum. 
Nullam vel sapien nec pede luctus fermentum. Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non auctor diam nisi interdum nisl. Sed a tortor in erat porta laoreet. Donec tempus accumsan lorem. Proin turpis risus, accumsan eu, tempor at, pellentesque a, risus.
Paragraph 2 ID="aside" ... Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit enim sed tortor. Mauris vulputate imperdiet ipsum. Nam laoreet mauris sed risus. Vivamus felis. Donec viverra. Nullam vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a, vehicula et, eleifend quis, mi. Morbi magna neque, luctus vitae, interdum quis, ultricies et, nisi. Curabitur malesuada ullamcorper diam.
Paragraph 3 This paragraph is a non-floated element. ... Nam tempus, dui ut elementum vestibulum, urna justo blandit elit, et viverra nulla ipsum at libero. In turpis tortor, semper vitae, fermentum vitae, eleifend semper, erat. Vivamus quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum mattis, justo vel auctor placerat, mi nisl viverra dui, sed tempor ante diam vel libero. Etiam metus leo, condimentum sed, tempor ut, tincidunt ac, ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla aliquet eleifend tortor. Nulla metus. Mauris tristique sem sed elit. Ut non lectus pretium lorem varius facilisis. Aliquam consectetuer sem eu nibh. Proin eleifend ligula eu erat vestibulum hendrerit. Fusce gravida, lacus at fringilla tempor, nisl purus bibendum mauris, quis nonummy turpis libero eu tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed varius, sem faucibus porta aliquam, purus dolor pulvinar velit, vitae venenatis orci pede vitae pede. Vestibulum laoreet urna id lacus.