5 Steps to fix CSS float left not working issues

The problem

Before using flex, the CSS float property was commonly used to create multi column layouts. This was great and a quick and dirty way to get layouts up without thinking too much of the HTML structure.

However there are times when using float left does not work as expected.

To fix issues with the float:left, we can try the steps:

1. Ensure that the width of the element you are trying to float is explicitly defined, and that it is not larger than that of its parent container.
2. Ensure that the float syntax you are using is correct.
3. Be sure to not use flex layout (display: flex) as it will override any float values set.
4. Ensure that the element’s position value is not set to absolute or fixed.
5. Check that you are using the clear property correctly, as it can prevent floated elements from appearing next to other elements.

Note: Floated left elements are removed from the normal document flow!

When we set float:left on an element, it takes it out of the normal document flow and moves it to the very left side of the parent container.

1. Ensure that the width of the element you are trying to float is explicitly defined

A common mistake when trying to float:left an element, is that we forget the default width values of the parent container.

For example, when we have the parent of the floated element as a <div>, the default display is block (display:block).

Now since we have the default display as block, the default width will be 100%. In this case we will not see our element float!

Consider the following HTML with three divs,

<main class="container">
     <div class="block red">      
        ...      
     </div>
    
     <div class="block green float-left"> <!-- Try to float this block of text -->
      ...
     </div>
     <div class="block blue">      
      ...
     </div>
</main>

And the CSS:

...

.container{
  width:60%;
  padding:1rem;
}
.block{
  padding:1rem;
}
.float-left{
  float:left;
}
...

We can see from the above, that the float does not seem to be working for the green block.

The issue here is that since we are using <div>, the default width is 100%.

To fix this, we can set the width explicitly with width or max-width.

<main class="container">
     <div class="block red">      
        ...      
     </div>
    
     <div class="block green float-left" style="width:300px"> <!-- Fix float left by adding width -->
      ...
     </div>
     <div class="block blue">      
      ...
     </div>
</main>

2. Check that you are setting the correct float syntax!

A common issue with float:left not working correctly, is that we are not using the syntax correctly.

Make sure you use it as float:left - no spelling errors.

More information here: https://w3c.github.io/csswg-drafts/css2/#propdef-float

When using the float: left property on multiple elements within a parent container, the first element will align to the left edge of the container, the second element will align to the left edge of the first floated element, and so on.

Tip: Keep floating boxes high in the HTML layout

Additionally, keep in mind that when adding a float:left property, keep in mind the element we are trying to float.

When dealing with elements that have default of display:inline, such as HTML <span>, <strong>, etc elements - setting properties such as width or height will not work!

Consider the below example, we are trying to set the width and height of a <span>. This will not work since span is a inline element:

span {
  display: inline;
  width: 1000px; /* ❌ won't have any effect */
  height: 1000px; /* ❌ won't have any effect */
}

However, if we use float on this element, the display property will be overwritten from display:inline to display:block.

Now we can set the width and height of the span without any issues:

span {
  display: inline;
  float:left;    /* ✅ Added float */
  width: 1000px;  /* ✅ This works now */
  height: 1000px; /* ✅ This works now */
}

3. Be sure to NOT use flex layout display: flex - will override any float values

According to the specifications (https://www.w3.org/TR/css-flexbox-1/#flex-containers), floats will not have any effect on the flex containers.

The float property does not apply to flex-level boxes! float and clear do not create floating or clearance of flex items, and do not take it out-of-flow.

For example, with the following HTML structure, and we are setting the .container class to be display:flex:

<main class="container">
     <div class="float-block"> <!-- ❌ Will not float left -->
        ...      
     </div>
     <div class="block"> 
      ...
     </div>
</main>

And in our CSS, we try to float left the .float-block element.

.container {
  display: flex;
}

.float-block{ 
  float:left; /* ❌ won't have any effect */
  width: 200px;
}

As an alternative to fix this, we just need to not use float, but work around with attributes that flex supports.

Flex float fix 1: use margin-left:auto and order property

.float-block {
  margin-left: auto;
  order: 2;
}

Flex float fix 2: use justify-content: space-between and order property

.container {
    display: flex;
    justify-content: space-between; /* ✅ Add this */
}

.container:first-of-type > div:last-child { order: -1; } /* ✅ Move other element to last */

Flex float fix 3: use justify-content: space-between and reverse the order

.container {
    display: flex;
    justify-content: space-between; /* ✅ Add this */
}

And in the HTML, we move the .float-block to be the last element of the container.

<main class="container">

     <div class="block"> 
      ...
     </div>
     <div class="float-block"> <!-- ✅ Rearrange the float block to last -->
        ...      
     </div>
</main>

4. Ensure that the element’s position value is not set to absolute or fixed.

The float property is a type of relative positioning, meaning it positions an element relative to its parent container.

Therefore, it conflicts with the absolute positioning property position: absolute, as the latter specifies a fixed location regardless of the positions of other elements.

To give the same effect as float:left with postion:absolute, we can do the following:

Consider the HTML structure:

<main class="container">

     <div class="block"> 
      ...
     </div>
     <div class="float-block"> 
        ...      
     </div>
</main>

.container{
    position:relative; /* ✅ Keep note of adding position relative */
}
.float-block {
    position:absolute;
    display:block;
    left:0; /* ✅ Add this */
}

Tip: make sure to set the parent to have a explicit position property.

5. Determine that you are using clear correctly

A common issue with floats is that the parent container does not stretch with the content height.

You can have one element that floats to the left having its height overflow the parent!

To fix this we need to add a clear:both element after the float element. In the below codepen, we can see that the first example (without clear), we can see that the image overflows the container.

<main class="container">
  <p>      
    <img class="float-left" src="https://.....">
    Lorem ipsum dolor sit amet ...
    <div style="clear:both" /> <!-- Add this to fix the height overflow issue -->
  </p>
</main>

Browser support

• Floats are generally supported across a wide range of browsers (IE, Edge, Chrome, Safari, Firefox)
• If you are using flex, we need to consider support for the justify-content: space-between and order properties
• Float values of inline-start and inline-end have limited support. In cases you will need to turn on enable-experimental-web-platform-features (Chrome and Edge)

Tip: Prefer using modern layouts such as flex or grid

We can use floats for their initial intention of floating images between text, however for layout purposes, its best to consider flex or grid which is more powerful

Summary

In this post, we discussed various reasons why the float: left property may not be working for a website layout and provided solutions to fix them.

It’s important to note that floats were originally used to create magazine-style layouts, where images are positioned between text.

When working with floats, it’s crucial to ensure that the width is explicitly defined, there are no conflicts with flex, the position property is not set to absolute or relative, and the clear property is being used correctly.

It’s also worth noting that browser support for floats is generally good across most browsers.

Howvever it’s recommended to consider using modern layout techniques such as flex or grid for better flexibility and control.