How to Float a Paragraph for HTML5 and CSS3 Programming

By Andy Harris

Paragraphs and other block-level elements have a well-defined default behavior in CSS3. They take the entire width of the page, and the next element appears below. When you apply the element to a paragraph, the behavior of that paragraph doesn’t change much, but the behavior of succeeding paragraphs is altered.

Begin by looking at a page with three paragraphs. Paragraph 2 has its float property set to left.

image0.jpg

As you can see, some strange formatting is going on here. Take a look at what’s going on:

  • Borders have been added to the paragraphs. As you’ll see, the width of an element isn’t always obvious by looking at its contents. When you’re messing around with float, it might be wise to add borders to the paragraphs so you can see what’s going on. You can always remove the borders when you have it working right.

  • The first paragraph acts normally. The first paragraph has the same behavior you see in all block-style elements. It takes the entire width of the page, and the next element will be placed below it.

  • The second paragraph is pretty normal. The second paragraph has its float attribute set to left. This means that the paragraph will be placed in its normal position, but that other text will be placed to the right of this element.

  • The third paragraph seems skinny. The third paragraph seems to surround the second, but the text is pushed to the right. The float parameter in the previous paragraph causes this one to be placed in any remaining space (which currently isn’t much). The remaining space is on the right and eventually underneath the second paragraph.

The code to produce this is simple HTML with equally simple CSS markup:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>floatDemo</title>
 <style type = "text/css">
  p {
  border: 2px black solid;
  }
  .floated {
  float: left;
  }
 </style>
 </head>
 <body>
 <h1>Float Demo</h1>
 <p>
  Paragraph 1.
  This paragraph has the normal behavior of a block-level element.
  It takes up the entire width of the page, and the next element
  is placed underneath.
 </p>
 <p class = "floated">
  Paragraph 2.
  This paragraph is floated left. It is placed to the left, and the
  next element will be placed to the right of it.
 </p>
 <p>
  Paragraph 3.
  This paragraph has no floating, width or margin. It takes whatever
  space it can to the right of the floated element, and then flows
  to the next line.
 </p>
 </body>
</html>

As you can see from the code, there is a simple class called floated with the float property set to left. The paragraphs are defined in the ordinary way. Even though paragraph 2 seems to be embedded inside paragraph 3 in the screen shot, the code clearly shows that this isn’t the case. The two paragraphs are completely separate.