Float, Layout, Centering

Premium Content - Free Preview


float is used to take an element out from it's default placement and moved to the left or right side of the other content. This is often used to place images to the side of a block of content.

The image on the right uses float: right; to float to the right. The image also has a margin: 10px; to give it some space so it doesn't go right into the text.

If you using float on its own, elements will often float to the side of more content than you planned for. For example, here's how this page looked initially:

The image was supposed to just be floating to the side of the content about float, but the next section ended up next to it as well! To prevent this from happening, use the CSS property clear. clear lets you clear an element to ensure that it stays below floating elements. It can be set to left, right or both to specify the side that you want to stay clear of.

For example, the second paragraph below uses the clear style to make sure it appears below the image

<img src="https://s3.amazonaws.com/learneroo-images/main/Lynx_kitten.jpg" class="float-right">
<p>This will appear next to the image.</p>
<p style="clear: both">This will appear below the image.</p>


Have you noticed the difference between the placement of p (paragraph) elements and <b> (bold) elements?

Look at the following HTML and see how it's displayed right below:

<p>This is a paragraph.</p>
<p>This is a <b>bold paragraph</b>.</p>

This is a paragraph.

This is a bold paragraph.

The <b> element is rendered inline after the previous content, without creating a new block on the next line. Paragraphs however, form their own blocks that take up the whole width available with new lines before and after.

By default, the following elements are also block elements:

  • headings, like <h1>, <h2> and <h3>
  • <li> list elements (notice each bullet point on its own line.)
  • <table>

These elements are inline by default:

End of Free Content Preview. Please Sign in or Sign up to buy premium content.

Contact Us