DEV Community

loading...
Cover image for Stop Using Float in CSS - Here Are Your Alternatives

Stop Using Float in CSS - Here Are Your Alternatives

shahednasser profile image Shahed Nasser Originally published at blog.shahednasser.com ・3 min read

This article was originally published on my personal blog

Throughout my years of working in CSS, the property that causes the biggest mess in the layout isfloat. Wheneverfloatis used, unexpected behavior occurs at some point in your layout and design. I've also seen a few beginners who stumbled upon issues like this. They use float then when problems arise, they find it hard to link it back to the floated element.

For this reason, I'm giving you a few options you can use to achieve the same effect you need withfloatwhile avoiding the mess. These options targetblockelements, as forinlineelements I assume you know you can usetext-alignwith.


Margin

You've probably usedmargin: 0 auto;a lot to center a block element horizontally. You can also usemarginto align a block element to the left or to the right. If you need to align it to the left, then setmargin-right: autoandmargin-left: 0;. If you need to align it to the right, then setmargin-left: autoandmargin-right: 0;. Basically, to align a block element to one side horizontally, set the margin of that side to 0 and the opposite side to auto.

It should be noted that the block should have a width set less than a100%. So it should either have a fixed width value orfit-content.

As you can tell, you can't really align two elements on the same level with this method. You should try one of the other methods detailed below.


Align with Flex

Using flex, you can align your elements even more flexibly. In particular, to align your element horizontally to the left or to the right, first, you need to adddisplay: flex;to the parent. Then, you have two options depending on theflex-directionyou will use. If you useflex-direction: row;then setjustify-content: flex-end;to align the item to the end of the parent element orjustify-content: flex-start;to align the item to the beginning of the parent element. This also allows you to apply a similar style for both right-to-left and left-to-right layout, asflex-endin left-to-right will align the element to the right andflex-startwill align the element to the left, whereas in right-to-left it will be the opposite.

To align the element with another element on the same level, you can use a combination of flex and margin like explained above:


Align with Grid

Now, this one may be more complex depending on your use case, but you can also align blocks using grids. What you need to do is set the display of the parent element to grid, then, in the case of one block in the grid that you just want to align to the right, you can setgrid-auto-columns: calc(100% - BLOCK_WIDTH);if you have the block width set. If not then this won't be necessary. Then, setgrid-area: right;on the block you want to align and it will be aligned to the right.

Of course, you can do much more with grids and you can use them for many blocks with different kinds of alignments, this is just a simple case of aligning an element in the grid to the right.

To align two blocks on the same level, you can make use of grid-template-areas to specify the template of the grid and the name of each area, then assign your blocks the area they should be in


Conclusion

There also may be other options that you can go for when aligning your elements depending on your layout. Regardless of which option you choose, stop using float.

Discussion (8)

pic
Editor guide
Collapse
chakudi profile image
Vaishali JS

The alternatives like flexbox and grid are great and we should use them for layouts.

But don't stop using floats. Floats are still good choice for their original purpuse, ie. Floating text around figures.

👍

Collapse
shahednasser profile image
Shahed Nasser Author

Even if in certain use cases it wouldn’t really be problematic I still think we should move past it. Especially for beginners that still rely on it. It’s more important for them to learn about Flexbox and Grids and use them.

Collapse
idarek profile image
Dariusz Więckiewicz

Great reminder of that, that there are other options than float. Recently replaced some of my website, however there are instances where float will been needed. But, great to showing us that there is a way...

Collapse
elianvancutsem profile image
Elian Van Cutsem

CSS Grid is always my way to go! TailwindCSS introduces very easy grid utility classes!
(tailwindcss.com/docs/grid-template...)

Collapse
aalphaindia profile image
Pawan Pawar

Keep sharing!

Collapse
snekattack profile image
snekattack

I personally prefer flex, ANYONE WHO SEES MY COMMENT USE FLEX

Collapse
maco profile image
Mackenzie

Unless you're trying to get your paragraphs to wrap around an image. In that case, that's exactly the one and only use-case for which float was invented.

Collapse
afif profile image