CSS Float

When you’re designing a web page, you may decide that a particular element should appear in a certain position on the page. For instance, you may want a box containing an image to appear at the right of a page.

In CSS, the float property is used to specify how an element should be positioned. Float can be used to position an element to the left or right of a web page.

This tutorial will discuss, with reference to examples, how to use the CSS float property to position elements on a web page. By the end of reading this tutorial, you’ll be an expert at floating elements on a web page using CSS.

CSS Float Property

The float property can be used to position an element to the left or right of a web page. For instance, float could be used to position an image to the right of the text in a box on a web page.

The float property only applies to elements that generate boxes and are not positioned absolutely on the web page. Absolutely positioned elements are web elements which are positioned relative to the first parent element that has a position other than static.

The four most common values used with the float property are:

• left (floats an element to the left of the container)
• right (floats an element to the right of the container)
• none (there is no float applied to an element)
• inherit (the element is floated using the float property applied to its parent container).

The most common usage of the float property is to wrap text around an image in CSS.

CSS Float Example

Let’s say we are designing a website for the local Stargazer Blazers stargazing society. The club wants to have a web page that outlines the history of their organization. This web page should have a brief description of the club, as well as an image of the stars positioned to the left of the page.

We could use the float property to create this web page. Here’s the basic code that we will use for our web page, without any float applied:

index.html

<div>
<p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries.
</p>
</div>

Our code returns:

In this example, our image appears before our text, and overall the page is not very aesthetically pleasing. However, by using the float property, we can position our image next to our text.

Here’s the code we would use to position our image to the right of the text (which was what the stargazing society requested):

styles.css

img {
	float: right;
}

Our code returns:

Let’s break down our code. First, we defined a <div> in which the code for our web page is written. Then we used a <p> tag to create our body of text, which includes a description about the history of the Stargazer Blazers club. Inside our <p> tag, we also included an image of the stars, which is 200×200 in size.

In our styles.css file, which includes the style code for our web page, we used the float: right; attribute to float our image to the right of the text. As you can see in the above example, our image is positioned to the right of our text. By default, the image would appear before our text.

Now, suppose the stargazing club has asked us to position the image to the left of the text. We could do so using this code:

styles.css

img {
	float: left;
	margin-right: 20px;
}

Our code returns:

In this example, we floated our image to the left of our text. We also specified a margin-right: 20px; property, which creates a space between the left of our image and our text.

Box Grid with Float

The float property allows you to create boxes of content that appear side-by-side.

Suppose the stargazing society wanted three images to appear side-by-side, which show the stars people could see if they joined.

We could use the following code to accomplish this task:

index.html

<div>
<img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>

styles.css

* { box-sizing: border-box };

.image {
	float: left;
	width: 25%;
	padding: 25px;
}

Our code returns: 

Let’s break down our code. In our HTML file, we have a <div> tag which contains three images (represented by <img> tags). Each image is 200×200 in dimensions and links to a unique image of the stars. In addition, each image is assigned the class image.

In our styles.css file, we:

• Apply the box-sizing: border-box; style to every item in our list, so the padding and border of an element will be included in its total width and height. This allows us to position our elements side-by-side with no default spaces.
• Use float: left; to make our images appear side-by-side.
• Use width: 25% to make each image take up 25% of the width of the web page.
• Use padding: 25px; to create a 25px space between each image.

Conclusion

The CSS float property is used to place an element on the left or right side of its container. This allows text and other elements to wrap around the floating element.

This tutorial discussed, with reference to examples, how to use the CSS float attribute to position elements to the left and right of a container in CSS. Now you’re ready to start using the float attribute like a CSS expert!