Dreaded floaters – Or, a tale of css driven layout and the quest to clean up the mess.
Gone are the days of the clunky floaters…
and by floaters, I mean CSS float properties to run your layouts. For too long we were subject to layout oddities, browser support issues, float clearing, column height inconsistencies etc.
CSS3
CSS3 has brought to the table so many improvements and prized among them are the flex and CSS grid properties. For the purposes of this post I will focus on setting up basic layouts with flex or flexbox to rid you of the shackles clearing floats.
The principle is fairly straightforward: as with many html/CSS layouts you start with a containing div to apply the float property to, then from there you will attribute the row or column properties, whether child elements can wrap, how they alight horizontally and vertically (yay!) among other options.
The great part of flex is that has reached browser saturation in terms of support so you know you can count on the layout to behave across the various browsers, operating systems and so on.
Working in flex can be imagined in these simplified categories:
flex container, flex item, and direction. In this fashion you can construct a serious of containers to create rows and/or columns. Even better you can nest these structures as deep as you need to create multi-purpose containers.
The Flex Container (Parent):
Rather than suffer the pitfalls of floating containers, defining heights, clearing the floats, and generally checking and guessing at your positioning, Flex Containers behave in a more predictable, straightforward manner.
The flex container does just what it says and contains its flex children (not weightlifting kids mind you). From here properties such of content justification, wrapping, and alignment can be set to create your rows/columns.
These child elements can be all aligned to the beginning, end, or centered in the flex container, horizontally or vertically. From there you can determine the spacing between each by utilizing justification.
The Flex Items (children):
Your child elements in the flex container can be given even more granular properties to grow or shrink in size to fill out space, change their order, and align differently than the properties of the parent container.
To get down and dirty (or clean in this case) with floats there are myriad sources of documentation available including:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Want to generate your flexbox styles quickly and eliminate some guesswork? Check out this fantastic Flexy Boxes tool.
The internet is a wide and winding river. Do not get stuck floating along the edges with your layouts; take your journey on the stable craft of flexbox. Leave the floats to their ideal purpose of position elements in relation to blocks of text.