# CSS Floats

# Learning Objectives

After completing this lesson, you will be able to:

Float HTML elements using CSS
Create layout using floats
Clear floats

# Lesson

# Overview

float is a CSS property that allows a developer to position an HTML element to the left or right of other elements. In this lesson we will discuss the multiple ways to float an element as well as how to deal with common problems that come up with this property.

# HTML Flow

In order to understand the float property it's important to understand the flow of HTML elements. By default, elements flow through a web page from top to bottom and left to right as they are defined in the HTML document.

Default Flow

Here is an example of the default behavior of elements when an image is defined just before text.

placeholder Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque quaerat id asperiores at ad odit aperiam harum repellendus commodi magni, modi eligendi iure veniam ipsam dolorem dolor nesciunt consectetur quia eveniet possimus quibusdam laborum est explicabo? Autem optio obcaecati ducimus, maxime cum molestias, vero facere esse corporis accusantium

Float Left

When adding float: left to the image, you can see the image's behavior changes and the text wraps itself around the image.

Float Right

When using float: right the behavior changes slightly. The image now aligns itself to the right of the container it's in and the text moves to the image's default position and wraps around the image on the right.

Source Order Matters

In the examples above, the image is always defined before the text. That's because the float property restructures the flow of the elements from where it is set in the doucment down. If you call the image after the text with the float property you will simply have a floating image on its own.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque quaerat id asperiores at ad odit aperiam harum repellendus commodi magni, modi eligendi iure veniam ipsam dolorem dolor nesciunt consectetur quia eveniet possimus quibusdam laborum est explicabo? Autem optio obcaecati ducimus, maxime cum molestias, vero facere esse corporis accusantium aperiam placeholder

# Dealing with Overflow

In the last example, you can see the image bleeds outside of the container, this is called overflow. By default, elements will flow over their parent elements if a property like float or certain position values are used. This can be adjusted using the overflow property.

Overflow works across the x and y axis of the document. For the example above, setting the container to overflow: auto will change the element to allow elements that overflow (like a floating image) to remain inside the container element.

# Clearing Floats

The next most common issue when floating elements is when floated elements overlap, but should not. Adding the clear property to an element prevents previously floated elements from interacting with it.

For example, if we add clear: left to the paragraph element, then even if we float an image before a paragraph the clear property will ignore the image that is floated to the left above it.

# Wrapping

Something to keep in mind is that an element can only float inside the size of its parent container. As shown above, some elements may overflow depending on its position. But what happens when multiple elements float next to each other?

In this example, a group of blocks will all be set to float: left and notice what happens as the element reaches the width of the container.

🍬

The elements wrap to the next line when floated elements reach the width of the container. Since all of these elements are floating it's important to include the overflow property as mentioned before.

# Layout Example

Wrapping an image around text is a simple example. How can floats be used to create a website's layout? We will have to use all of the properties to achieve a bug free result.

First, a header can be created by floating an image and menu items inside the header.

<header class="header">
  <ul class="header-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <h1 class="header-title">Acme Inc.</h1>
</header>

1
2
3
4
5
6
7
8
9

.header {
  overflow: auto;
  /* since all the elements are floating,
     setting overflow will allow the rest of
     the layout to flow properly */
}
.header-menu {
  float: right;
  list-style-type: none;
}

.header-menu > li {
  float: left;
  padding-right: 10px; /* whitespace */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Acme Inc.

Notice that the menu is floating to the right, but the individual menu items are floating to the left. You can mix and match the property however best fits. If you float individual items to the right they will be display in the reverse order from right to left.

Continuing with the layout, to add a sidebar and main content one of the elements will have to float next to the other. For this example we'll float the sidebar to the right of the main content.

.container {
  overflow: auto; /* don't forget to adjust the overflow */
  clear: both;
}

.sidebar {
  float: right;
  padding: 10px;
}

1
2
3
4
5
6
7
8
9

<div class="container">
  <aside class="sidebar">
    ...
  </aside>
  <main>
    <h2>Headline</h2>
    ...
  </main>
</div>

1
2
3
4
5
6
7
8
9

Acme Inc.

Headline

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi asperiores ullam eligendi id, explicabo libero eos iste sunt aliquam alias voluptatum numquam natus quibusdam minima eveniet molestiae illum! Ratione

Finally when adding the footer it's important to clear all previous floats.

.footer {
  clear: both;
}

1
2
3

Acme Inc.

Headline

Layout is Dynamic

Keep in mind that if you use floats for layout that every page will be slightly different reguarding content and the height of elements. That's why it's important to properly test different lengths of content and using the overflow and clear properties appropriately.

# Summary

The float CSS property is used to adjust HTML elements to float and wrap around other elements withing the flow the the document. You can float left or right and can even float multiple items next to each other.

We also covered overflow to deal with floated content inside its container as well as clear to prevent unwanted elements from interacting with floated elements.

Lastely, we covered how to create a layout using floats by combining everything covered in the lesson.

# Training Exercises

To solidify your knowledge, here are a set of exercises that will require you to use the techniques you've just learned in the lesson above.

They are organized into small, medium, and large sized problems. The small exercises will be very similar to the examples in the lesson. If you get stuck, refer to the relevant section above. The medium exercises will require you to combine concepts. The lesson may not have a single, specific example for you to reference. The large exercises are more open-ended and may require you to search the web for additional material.

# Small

Create a basic navigation by floating list items next to each other. Use the list-style-type: none property on the ul element to remove the "•". Make a menu of at least 5 items (ex: "Home", "About", "Blog", etc...)

View Navigation Solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navigation Solution</title>
    <style>
      .menu {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .menu > li {
        float: left;
      }

      .menu > li:not(:last-child) {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Blog Post

Create a blog post made up of half a dozen paragraphs or more (can be fake text). Add three photos and float them left and right throughout the post. It will should look like a magazine style editorial piece, get createive and use your existing CSS knowledge to give it some style.

View Blog Post Solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog Post Solution</title>
    <style>
      body {
        font-size: 18px;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
      }

      .image-right {
        float: right;
        padding: 10px 0 10px 10px;
      }

      .image-left {
        float: left;
        padding: 10px 10px 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>How to Float Images Using CSS</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus odio
        similique ex expedita, sit minima quod iusto necessitatibus accusamus ab
        corporis vitae commodi. Possimus et suscipit eveniet eum odit,
        perferendis cum saepe libero deserunt rerum alias qui culpa illo neque
        eligendi at nam, magnam illum velit error dolorem. Tempore aspernatur
        reiciendis, officiis alias.
      </p>
      <img
        src="https://picsum.photos/300/200"
        alt="placeholder"
        class="image-right"
      />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic enim
        temporibus dignissimos veritatis quam aliquid excepturi perspiciatis
        eaque at a tempore atque dolor cupiditate, dolorum ratione impedit
        expedita nam beatae ab doloremque! Dolorem aut in, distinctio hic
        explicabo voluptatum laborum labore voluptatem esse mollitia laudantium
        ea ipsa laboriosam eos. Alias magni voluptatibus quos vel corporis
        possimus, nobis, fuga eius quia tempora ullam nesciunt eum architecto
        voluptates ut commodi reprehenderit fugit officia est nulla veniam eaque
        quae ab sunt. Qui aut, doloribus, reprehenderit ab error maxime autem
        corrupti blanditiis expedita eius incidunt iure maiores in! Porro quia
        dolore repellat ut doloremque!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
        cupiditate nam tenetur iste, explicabo voluptatibus? Tempora accusamus
        ab amet reiciendis magnam cum illo deserunt fugiat suscipit. Dolorum
        illum porro nisi magnam vel nam nulla exercitationem praesentium nobis
        laboriosam ipsam ea accusamus quis repudiandae, sunt id esse dolores
        temporibus. Optio, earum?
      </p>
      <img
        src="https://picsum.photos/200/200"
        alt="placeholder"
        class="image-left"
      />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae
        vero provident, dolorum asperiores, omnis cupiditate, consectetur
        accusantium rerum molestiae nihil saepe ullam ipsum? Suscipit ipsum esse
        laborum, nulla blanditiis quasi!
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit
        asperiores aut rerum, eligendi amet, temporibus repellat voluptas ea
        voluptates nobis accusamus molestiae ipsa error commodi et placeat
        voluptatum odio eaque iste doloribus ex blanditiis quis magnam. Sit,
        iste. Fugit, ipsa.
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae corrupti
        cumque optio earum iure. Iure animi dolorum quaerat reprehenderit, natus
        minus consectetur tenetur corporis aut libero sunt assumenda ullam quos
        unde beatae ea sint nisi non eius atque nesciunt doloremque. Minima,
        iure voluptatum. Pariatur excepturi itaque libero nulla. Optio excepturi
        sunt magni nihil laboriosam at, ratione minima corporis fuga iste!
      </p>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

# Medium

# Grid

Create a 9x9 grid using floats. Put all 9 elements in the same container and set a width on the container and elements to create the desired grid size of 9x9.

View Grid Solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Solution</title>
    <style>
      .grid {
        max-width: 600px;
        margin: 0 auto;
      }

      .grid-item {
        float: left;
        width: 200px;
        height: 200px;
      }

      .grid-item:nth-child(odd) {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Gallery

Create a gallery of images that float side-by-side of each other. The images should be different widths.

View Gallery Solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gallery Solution</title>
    <style>
      body {
        margin: 0;
        padding: 10px;
        background-color: #eee;
      }

      .gallery {
        max-width: 800px;
        margin: 0 auto;
      }

      .gallery-item {
        border: 5px solid white;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="gallery">
      <img
        src="https://picsum.photos/200/200"
        alt="placeholder"
        class="gallery-item"
      />
      <img
        src="https://picsum.photos/400/200"
        alt="placeholder"
        class="gallery-item"
      />
      <img
        src="https://picsum.photos/110/200"
        alt="placeholder"
        class="gallery-item"
      />
      <img
        src="https://picsum.photos/420/200"
        alt="placeholder"
        class="gallery-item"
      />
      <img
        src="https://picsum.photos/320/200"
        alt="placeholder"
        class="gallery-item"
      />
      <img
        src="https://picsum.photos/200/300"
        alt="placeholder"
        class="gallery-item"
      />
      <img
        src="https://picsum.photos/540/300"
        alt="placeholder"
        class="gallery-item"
      />
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

# Large

# Layout

Create a website layout, similar to the example in the lesson, using floats. There should be the following

A header with a title and floating navigation
A main content area (75% width) and a floating sidebar (25% width)
A footer (clear of both the content and sidebar)

View Layout Solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=`" />
    <title>Layout Solution</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .layout {
        max-width: 800px;
        margin: 0 auto;
      }

      .layout-header {
        overflow: auto;
        margin-bottom: 20px;
      }

      .layout-sidebar {
        float: right;
        padding: 10px;
        width: 25%;
      }

      .layout-main {
        width: 75%;
      }

      .header-menu {
        float: right;
        list-style-type: none;
      }

      .header-menu-item {
        float: left;
        padding-right: 10px;
      }

      .header-title {
        margin: 0;
      }

      .sidebar-title {
        margin: 0;
      }

      .main-title {
        margin: 0;
      }

      .layout-footer {
        clear: both;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <header class="layout-header">
        <ul class="header-menu">
          <li class="header-menu-item"><a href="#">Home</a></li>
          <li class="header-menu-item"><a href="#">Blog</a></li>
          <li class="header-menu-item"><a href="#">About</a></li>
          <li class="header-menu-item"><a href="#">Contact</a></li>
        </ul>
        <h1 class="header-title">Acme Inc</h1>
      </header>

      <aside class="layout-sidebar">
        <h3 class="sidebar-title">Categories</h3>
        <ul>
          <li><a href="#">Finance</a></li>
          <li><a href="#">Hiring</a></li>
          <li><a href="#">Marketing</a></li>
          <li><a href="#">Sales</a></li>
          <li><a href="#">Culture</a></li>
        </ul>
      </aside>
      <main class="layout-main">
        <h2 class="main-title">Headline</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi
          asperiores ullam eligendi id, explicabo libero eos iste sunt aliquam
          alias voluptatum numquam natus quibusdam minima eveniet molestiae
          illum! Ratione
        </p>
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque
          reprehenderit dicta molestiae obcaecati iste qui consequuntur
          provident voluptas corporis ad nesciunt modi mollitia, minima a
          consectetur reiciendis similique autem, consequatur laboriosam
          deserunt. Iste cupiditate quod aliquid, odit, eligendi excepturi
          accusamus sint incidunt sunt laborum molestias distinctio dolores
          fugit obcaecati minus facere fugiat, enim tenetur iure quisquam
          aliquam perspiciatis! Recusandae aperiam blanditiis reiciendis nisi
          cupiditate quam quo aliquid sapiente sint ut nihil, et illum! Modi
          cupiditate quam optio, accusamus distinctio laudantium et atque sit
          saepe officiis, at iusto ipsam iure repudiandae ex, consequuntur
          tenetur dolor? Voluptate, sunt. Et, vel voluptatibus mollitia eum
          beatae corporis natus, modi veritatis hic reprehenderit ad porro a
          fugiat, in laudantium provident officia nihil animi autem blanditiis
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
          voluptas molestias obcaecati quas ratione cum perspiciatis fuga eaque
          necessitatibus, aperiam repudiandae rerum quam! Officiis, quos. Sunt
          quo tempore eum ducimus ex vitae saepe, veritatis odit voluptatum ad
          repellendus atque tempora quis suscipit exercitationem officia,
          debitis at maiores est quasi iste aspernatur sit maxime. Architecto
          saepe quasi iure ea alias eum veritatis obcaecati. Deserunt sequi
          nulla ab quam, assumenda odit odio nemo, culpa sed dolores, distinctio
          earum consequatur inventore. Eveniet, iusto?
        </p>
      </main>
      <footer class="layout-footer">
        Acme Inc. All rights reserved.
      </footer>
    </div>
  </body>
</html>

# CSS Floats

# Learning Objectives

# Lesson

# Overview

# HTML Flow

# Dealing with Overflow

# Clearing Floats

# Wrapping

# Layout Example

Acme Inc.

Acme Inc.

Headline

Acme Inc.

Headline

# Summary

# Training Exercises

# Small

# Navigation

# Blog Post

# Medium

# Grid

# Gallery

# Large

# Layout

# Interview Questions

# Fundamentals

# Bugfix

# Conceptual

# Architect

# Additional Resources