Float Like a Butterfly

Floats can be a very tricky CSS property to use but with some practice, floated items can be super rewarding! Two bonuses of using floats are Internet Explorer is compatible with them and position absolute items play nice. Flex-box, while generally more straightforward, doesn’t like it when it’s children are position absolute outside of the box. Flex-box won’t let them get away! Floats, on the other hand, give you some freedom.

One thing I found difficult to “wrap” my head around was making a 3 column layout with floats if you want the items to align to the sides of the container. One easy way to solve this is with calc and nth-child! By giving the 3 divs you want to serve as sections a margin right, and a width of 33.33% – (margin width) you can start building your layout. ¬†You’re not quite finished yet, as the third item has a margin on the right and isn’t aligned to the right side of your container. Using last-child or nth-child(3) you can select this last item and remove its right margin! Because of the calc function it will resize to fit your container perfectly! Awesome!

If you want to win your wrap battles, don’t forget to clearfix your parent divs!!

Go Back to Blog Home

Leave a Reply

Your email address will not be published. Required fields are marked *