Float Examples
Examples of common float are provided on this page.
Grid of Boxes / Equal Width Boxes
It is simple to float content boxes next to one another using the float property:
Example
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the images */
}
What is box-sizing?
Three floating boxes next to each other are simple to make. Nevertheless, the box will shatter if you include anything that makes each box wider, such padding or borders. In order to ensure that the padding remains inside the box and does not break, we can include the padding and border in the box’s total width (and height) using the box-sizing property.
Images Side By Side
It is also possible to display images side by side using the box grid:
Example
.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}
Equal Height Boxes
You discovered how to float identically widened boxes side by side in the preceding example. Nevertheless, making floating boxes of uniform height is not simple. Setting a fixed height, as in the example below, is a simple workaround, though:
Example
.box {
height: 500px;
}
That being said, this lacks flexibility. If you can ensure that the boxes will always have the same quantity of content, it’s OK. However, the content is frequently different. The content of the second box will appear outside of the box if you try the aforementioned example on a mobile device. Because CSS3 Flexbox can automatically expand boxes to match the longest box’s length, it is useful in this situation:
Example
Using Flexbox to create flexible boxes:
Tip: You can read more about the Flexbox Layout Module in our CSS Flexbox Chapter.
Navigation Menu
Another way to make a horizontal menu with float is to combine it with a list of hyperlinks:
Example
Web Layout Example
Additionally, use the float attribute for complete web layouts is common:
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%;
}
All CSS Float Properties
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |
| clear | Specifies what should happen with the element that is next to a floating element |
| float | Specifies whether an element should float to the left, right, or not at all |
| overflow | Specifies what happens if content overflows an element's box |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |
