CSS Layout - Float Example

This page provides common floating examples.

Grid / Equal-width box

Box 1
Box 2
Box 1
Box 2
Box 3

By using float This property can easily float content boxes side by side:

Example

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Three boxes (for four boxes use 25%, for two boxes use 50%, and so on) */
  padding: 50px; /* If you need to add space between images */
}

Try it yourself

What is box-sizing?

You can easily create three side-by-side floating boxes. However, when you add some content to expand the width of each box (such as padding or borders), the box may be damaged. box-sizing This property allows us to include padding and borders in the total width (and height) of the box, ensuring that the padding stays within the box and does not break.

You can find more information in our CSS Box Sizing In this chapter, you will learn more about the box-sizing property.

Side-by-side images

This type of grid (The grid of boxes) can also be used to display images side by side:

Example

.img-container {
  float: left;
  width: 33.33%; /* Three boxes (for four boxes use 25%, for two boxes use 50%, and so on) */
  padding: 5px; /* If you need to add space between images */
}

Try it yourself

Equal-width box

In the example above, you learned how to float boxes side by side with equal width. However, it is not easy to create floating boxes with the same height. But the quick solution is to set a fixed height, as shown in the following example:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Example

.box {
  height: 500px;
}

Try it yourself

However, doing so loses flexibility. It is okay if you can guarantee that the same amount of content is always in the box. But often, the content is different. If you try the example above on a phone, you will see that the content of the second box will display outside the box. This is where CSS3 Flexbox comes into play - because it can automatically stretch the box to make it as long as the longest box:

Example

Create a flexible box with Flexbox:

Box 1 - Here is some text to ensure that the content is really high. Here is some text to ensure that the content is really high. Here is some text to ensure that the content is really high. Here is some text to ensure that the content is really high. Here is some text to ensure that the content is really high.
Box 2 - My height will follow Box 1.

Try it yourself

The only problem with Flexbox is that it does not work in Internet Explorer 10 or earlier versions. You can find it in our CSS Flexbox Learn more about the Flexbox layout module in this section.

Navigation Menu

To float Used with a list of hyperlinks to create a horizontal menu:

Example

Try it yourself

Web Layout Examples

Use float It is also common to complete the entire Web layout with properties:

Example

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Try it yourself

More examples

An image with a border and margin floats to the right of the paragraph
Make the image float to the right of the paragraph. Add a border and margin to the image.
The titled image floats to the right
Make the image with the title float to the right.
Make the first letter of the paragraph float to the left
Make the first letter of the paragraph float to the left and set the style of the letter.
Create a website with floating
Use floating to create a homepage with a horizontal navigation bar, header, footer, left navigation bar, and main content.

All CSS floating properties

Property Description
box-sizing Define the calculation method for the width and height of elements: whether they should include padding and borders.
clear Specifies which elements can float next to a cleared element and on which side.
float Specifies how an element should float.
overflow Specifies what will happen if the content overflows the element's bounding box.
overflow-x Specifies how the left/right edges of the content area of an overflow element should be handled when the content overflows the element's content area.
overflow-y Specifies how the top/bottom edges of the content area of an overflow element should be handled when the content overflows the element's content area.