CSS Float: Learn to Make Elements Float to the Left or the Right

Making Elements Float

Elements with CSS float property affect the layout of other elements. The text content and images surround floated elements.

In the example, you see CSS float in action:

.float-box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 5px solid black; 
}  
	
.other-box {
   clear: left;
}

If you have several HTML elements inside one container, you need to determine how they float.

The float CSS property is commonly used for wrapping text around images. However, it can be utilized for other elements too.

There are four possible values for the CSS float property: 

• left: elements float on the left side.
• right: elements float on the right side.
• none: elements do not float.
• inline-start: elements float on the start side of the containing block.
• inline-end: elements float on the end side of the containing block.

The example below makes CSS float images to the left of the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu eros eu arcu posuere rutrum vitae in magna. Sed et quam sit amet arcu tempor imperdiet at nec mauris. Mauris facilisis pretium velit, at sodales justo interdum vel.

img {
   float: left;
}

The example below makes an image float to the right of the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu eros eu arcu posuere rutrum vitae in magna. Sed et quam sit amet arcu tempor imperdiet at nec mauris. Mauris facilisis pretium velit, at sodales justo interdum vel.

img {
   float: right;
}

The example below prevents the element from floating:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu eros eu arcu posuere rutrum vitae in magna. Sed et quam sit amet arcu tempor imperdiet at nec mauris. Mauris facilisis pretium velit, at sodales justo interdum vel.

img {
   float: none;
}

Imitating float: center

There is no property called CSS float: center. However, you can use a combination of properties to reach a similar result.

One option is to use display: flex and justify-content: center:

.example1 {
  width: 100%;
  height: 100%;
  border: 2px solid #cc3f85;
  display: flex;
  justify-content: center;
}

.example2 {
  width: 50%;
  border: 2px solid #66d9ef;
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Controlling Overflow

If the floating element is taller than the element containing it, then the floating element steps out of its container. You can fix this issue with the overflow property. Paired with an auto value, it stretches the container to be big enough for the floating element.

In the example, we fix the overflow problem using the overflow:auto method:

Without overflow: auto

In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container.

With overflow: auto

Add a class with overflow: auto; to the containing element, to fix this issue.

.clearfix {
    overflow: auto;
}

Note: the overflow property is not specifically designed for clearing floats. Use it carefully to avoid unwanted results.

The following method is preferred over the overflow:auto way of fixing this issue. It adds hidden content after the parent element (it clears the float).

Most modern websites use this strategy:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

CSS Float: Useful Tips

• The CSS float property does not work if elements have display: none.
• If the float property has inherit value, the element receives the float value from its parent.