CSS Layout - Float Examples

This page contains common float examples.

Grid of Boxes / Equal Width Boxes

With the float property, it is easy to float boxes of content side by side:

Output :

Images Side By Side

The grid of boxes can also be used to display images side by side:

Output :

Equal Height Boxes

In the previous example, you learned how to float boxes side by side with equal width. However, it is not easy to create floating boxes with equal heights. A quick fix, however, is to set a fixed height, like in the example below:

Output 3:

Flexible Equal Height Boxes with Flexbox

Using fixed heights with floating boxes is not very flexible. It works only if both boxes always have equal content. On mobile or with dynamic content, this can break the layout. This is where CSS3 Flexbox is useful — it automatically stretches all boxes to match the height of the tallest one.

Output :

Web Layout Example Using Float

It is also common to build entire web page layouts using the float property. In this example, we create a basic layout with a header, a sidebar, a main content area, and a footer using CSS floats.

Output:-: