Float, Layout, Centering

Float

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>

Layout

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:

• <b> and <i>
• links (<a>)
• images (<img>)

Sometimes you may want to create HTML elements just to help structure and style other elements. HTML provides two elements for this purpose:

• <div> - A block element
• <span> - A inline element

<div> is used as a container to apply styling to a group of block elements, while <span> is used to apply styling to specific inline text or elements.

Here's the HTML/CSS for the above content:

<div style="width: 50%; background-color: lightgreen;">
<p>For example, these two paragraphs are all contained in one div.</p>
<p>You can use a span <span style="color: darkred">to apply styles to specific text</span></p> 
</div>

You can change how an HTML element is displayed with the CSS display property, which can be set to inline, block or more. For example, let's say we had a list of pages:

• Home
• About
• Contact

<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>

<li> elements are block elements by default, but we'll change that to this:

• Home
• About
• Contact

How did that work? With the following CSS:

.nav-list li{
  display:inline;
  padding: 10px;
}

The first line shows a new selector type - it selects all <li> elements inside elements marked with a .nav-list class.

The next line changes the display of these <li> elements to inline and finally we add some padding to the elements so they don't bump into each other.

centering with margin and width

Sizing discussed how to set the size of an element. What if you want to center an element? To do this, set the width that you want, and then set the horizontal margins to auto:

#main-col1 {
  width: 600px;
  margin: 0 auto; 
  background-color: lightgreen;
}

However, as mentioned before, insisting on a wide size won't look good on a small screen.

Instead, you can use the max-width property:

#better-main-col {
  max-width: 600px;
  margin: 0 auto; 
  background-color: lightgreen;
}

To learn more about layouts with your own CSS, see this tutorial. Instead of writing all your own CSS, you can also use CSS frameworks.