I have used floats in my styling for many years now. I do not even notice the problems and the amount of work coupled to doing things this way. It is time that I move on to better technologies and say good-bye to floats forever.
I have played around with CSS Grid and Flex-box for some time now but I am by no means an expert in either. Most of my clients that I do development for are using Internet Explorer and therefore CSS Grid is not the way to go for me at this stage. Flex-box is another story, everything runs very smoothly without any hacks in Internet Explorer.
As soon as I have all the kinks sorted out for a WordPress layout using flex-box throughout I will add such a layout to all my WordPress themes. I have added a bit of my experimentation as a Codepen which I embedded below. I would love comments and/or suggestions on how to improve the layout.
I am also playing around with CSS Grid but in all honesty I am struggling with this stuff. I cannot test in Internet Explorer but the divs should simply collapse below one another `(like on a mobile) on browsers that do not support CSS Grid.
Thanks for visiting.