Lesson Wednesday

So far, everything we've done has been laid out very simply, from top to bottom for block elements, and left to right for inline ones. But often we'll want to have text wrap around an image, or have a sidebar on one side, or create a page with multiple columns. We can design all of these layouts using floats.

Here's an example of how to have text wrap around an image. First, the HTML for a new page about walruses:

walrus.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>The Walrus: a strange and noble creature</title>
  </head>
  <body>
    <img src="img/walrus.jpg" alt="A walrus basking on a rock.">
    <p>The walrus is truly a majestic animal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </body>
</html>

And then the CSS rule:

styles.css
img {
  float: left;
}

Check it out: the image "floats" to the left, and the text wraps around it. If your web browser isn't wide enough that the text extends below the bottom of the image, resize the window so that you can see how the text flows at the bottom of the page.

You can of course make the image float the right, if you'd prefer. And if you'd like only certain images to float, you can just add a class to those images, and only float images with that class.

Now let's use floats to create a sidebar:

walrus.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <title>The Walrus: a strange and noble creature</title>
  </head>
  <body>
    <h1>All about walruses</h1>
    <div class="sidebar">
      <h2>IRL</h2>
      <p>Want to see walruses in real life? Here are some places to check out:</p>
      <ul>
        <li>The beach</li>
        <li>The ocean</li>
        <li>The bay</li>
        <li>Rocks</li>
      </ul>
    </div>

    <div class="main">
      <p>The walrus is truly a majestic animal. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </body>
</html>

And the CSS:

styles.css
.sidebar {
  width: 30%;
  float: right;
  background-color: yellow;
}

Are you starting to see how this works? Let's do one more thing with floats and create a column layout:

columns.html
<!DOCTYPE html>
<html>
  <head>
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
    <title>Columns</title>
  </head>
  <body>
    <h1>Check out these columns</h1>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>

    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>

    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </body>
</html>

CSS:

styles.css
.column {
  width: 300px;
  float: left;
}

And now we have columns.

Floats are incredibly powerful and an important way to lay out your web pages.

Terminology


  • Float: A CSS option that assists in layout by allowing elements on the page to be placed next to each other in the layout (values include right or left).

Examples


Use floats to make elements float to one side of the page. Other elements will wrap around that element.

Float an image to the left:

floating-image.html
<img class="main" src="img/walrus.jpg" alt="A walrus basking on a rock.">
styles.css
img.main {
  float: left;
}

Create a sidebar:

sidebar.html
<h1>Title</h1>
<div class="sidebar">
  <h2>Sidebar</h2>
  <p>Some sidebar stuff.</p>
</div>
<p>Main page stuff.</p>
sidebar-styles.css
.sidebar {
  float: right;
}

Make a column layout:

columns.html
<div class="column">
  <p>Column 1</p>
</div>
<div class="column">
  <p>Column 2</p>
</div>
<div class="column">
  <p>Column 3</p>
</div>
column-styles.css
.column {
  width: 300px;
  float: left;
}