[5 FIXES] for CSS float right not working issues

The problem

Sometimes, with custom web layouts, we may want to use floats (right and left) to align our components (for example a side bar that floats to the right).

Originally, floats were designed to display images (or float images) within text. This is common in magazine style layouts. However as the web progressed, they have more uses - such as displaying grid galleries, etc.

To fix issues with the float:right, you could try the following steps

1. Make sure the float element has width explicitly set. The width of the child element should not be more than the parent!
2. Check that you are setting the correct float syntax!
3. Verify that you are not mixing in flex layouts (display:flex). Flex will ignore any float value thats been set.
4. Position value should not be position:absolute or position:fixed
5. Determine that you are using clear correctly

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

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

For the typical use case of floats (aligning images inside of text). Consider the following code - we can use floats to align a image within the <p> tag.

This gives a magazine style layout! In the below code, when having NO float set, we can see that the content flows from top to bottom.

As for the second container, it sets the <img> to float right and we can see that it aligns to the right edge of the container!

1. Make sure the float element has width explicitly set.

A common mistake when working with floats (left or right) 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-right"> <!-- 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-right{
  float:right;
}
...

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-right" style="width:300px"> <!-- Fix float right by adding width -->
      ...
     </div>
     <div class="block blue">      
      ...
     </div>
</main>

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

As mentioned in the CSS2 specifications, floats only allow for the following properties. Make sure that you are not having any typos or using them incorrectly

• left,
• right,
• none,
• inherit

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

When there are multiple float right elements in a containing element, the first one will go to the edge of the container, the second one will float to the 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:right property, we are also overriding the display property of the element:

So for example, lets say we are dealing with a <span> element. Span elements by default have display:inline.

This means that setting the width or height values will not have any effect on them:

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:right;    /* ✅ Added float */
  width: 1000px;  /* ✅ This works now */
  height: 1000px; /* ✅ This works now */
}

3. Using float:right won’t work with flex

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 right -->
        ...      
     </div>
     <div class="block"> 
      ...
     </div>
</main>

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

.container {
  display: flex;
}

.float-block{ 
  float:right; /* ❌ 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. Fix float:right with position absolute (or postition:fixed)

Float is a type of relative positioning, since it determines an element’s position relative to its parent container.

This means that it is incompatible with the absolute positioning property of position:absolute, which specifies a certain location regardless of other elements and their positioning.

To give the same effect as float:right 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;
    right: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.

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-right" 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 went over a few reasons and fixes on why float:right is not working for a website layout.

Floats originally was proposed to do layouts that mimic mazagine style layouts where the images float between text.

When designing with floats, we need to consider to set the width explicitly, check that there are no conflicts with flex, check if you are using position:absolute or position:relative and finally check if using clear property correctly.

Additionally browser support for floats is good across most browsers, however the general tip to consider modern layout techniques such as flex or grid instead!