Let’s start with a handy-dandy way to keep floated elements from collapsing into each other and overflowing while you’re doing a web page layout. (If you have no idea what I’m talking about, the tl;dr is: web pages use secret behind-the-scenes boxes to create a pretty website, and sometimes the boxes overlap when you don’t want them to and then it looks ugly. )
Some Googling leads me to believe that there are a million and a half ways to solve the problem. Here’s the simplest one I can find that’s been working for me on my practice sites, on browsers back to IE8. It’s a two-step process.
1. In your CSS, create a new rule targeting a class. You can call your class whatever, obviously, but .clearfix and .group are the two most commonly used monikers for this fix. For others reading your code, .clearfix is probably the most readable.
2. In your HMTL, assign class “clearfix” to the parent class of your problem children. In my case, I had a wrapper div. Like this:
<div class =”clearfix”>
Because the clearfix is a class, you can assign it to as many elements in your website as you need to. Enjoy all the new pretty options that are open to you! Also, if you know about pseudo-elements (apparently that is what the double colon in “clearfix::after” means, please enlighten me!