The float property is used to float boxes on the sides of other boxes, allowing other content to flow around it. First used to wrap text around images.

<div style="border:1px solid black"> 
  <img style="float:right" src="fox.jpg">
  Pamela Fox has worked in ....
</div>

Pamela Fox has worked in the Developer Programs group at Google for the last 2 years. She dedicates most of her time to supporting the Google Maps API, but spends her free time mashing up other APIs and developer tools. Before that, she graduated from the University of Southern California (USC), where she majored in Computer Science, minored in Linguistics and 3d animation, and helped grow the video games department.

The float property can also be used to float non-IMG elements, but make sure to specify a width for the floated element.

<div>
  <div style="float:left; width:50px; background-color:yellow; ">
    H<br>O<br>M<br>E
  </div>
  Hi, this is my personal website, where you'll find out everything about my inner desires, hopes, dreams, and incredibly exciting daily life.
</div>
<div>Contact me for more info.</div>

The clear property can be used to specify that an element should not wrap around floated elements above it.

<div style="float:left; width:50px; background-color:yellow; ">
  H<br>O<br>M<br>E
</div>
<div>
  Hi, this is my personal website, where you'll find out everything about my inner desires, hopes, dreams, and incredibly exciting daily life.
</div>
<div style="clear:both">Contact me for more info.</div>

With all these CSS properties combined, you can create nice looking non-linear page layouts.

• One-column, Fixed layout
• One-column, Liquid layout
• Two-column, Liquid layout
• Three-column, Fixed layout

More sample layouts