Create Equal Width Boxes
With the float property, it is easy to float boxes of content side by side.
What is box-sizing? When you add padding or borders, a floated box can break to a new line. The box-sizing property includes the padding and border inside the box's total width and height, so the layout does not break.
Example
Three boxes float side by side at one-third width each, with box-sizing: border-box keeping the padding inside.
<style> block, set * box-sizing to border-box, then make a .box class that floats left, is 33.33% wide, has padding and a border. Add three boxes so they sit side by side without breaking the layout.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
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 boxes */
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
Images Side By Side
The same grid of floated boxes can be used to display images side by side.
Example
Three image containers float side by side at one-third width each.
<style> block, set * box-sizing to border-box, then make an .img-container class that floats left, is 33.33% wide, with small padding. Put a colored box (image stand-in) inside each. Add three containers.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.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 */
}
.img {
width: 100%;
height: 150px;
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="img-container"><div class="img"></div></div>
<div class="img-container"><div class="img"></div></div>
<div class="img-container"><div class="img"></div></div>
</body>
</html>
Create Boxes With Equal Heights
It is not easy to make floating boxes the same height when their content differs. A quick fix is to set a fixed height on the boxes.
Example
A fixed height of 500px keeps the floated boxes the same height even with different content.
<style> block, set * box-sizing to border-box, make a .box class that floats left at 33.33% width with padding and a border, and give the boxes a fixed height of 500px so they all match. Add two boxes with different amounts of text.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 20px;
border: 1px solid #4CAF50;
height: 500px;
}
</style>
</head>
<body>
<div class="box">
<h2>Box 1</h2>
<p>Some short content.</p>
</div>
<div class="box">
<h2>Box 2</h2>
<p>More content here. Even though the two boxes have different amounts of text, the fixed height of 500px keeps them the same height.</p>
</div>
</body>
</html>
Navigation Menu
You can also use float to build a navigation menu, by floating the list items so the links sit next to each other. PromptCookbook links to a full example for this.
All CSS Float Properties
A summary of the float-related properties:
box-sizing— sets how the total width and height of an element are calculated.clear— sets what happens with the element next to a floated element.float— sets whether and how an element floats.overflow— sets what happens when content overflows an element.