This post explains generally how to float divs left. It’s part of our new series jokingly called “why can’t anyone explain this?” topics focused on HTML and CSS.
When we learned how to float two divs right and left of eachother using just HTML and CSS (which is all you need), I had no idea it would become our 2nd most popular post.
But given how endlessly and maddeningly complicated almost all other guides on how to float divs, widgets, icons, or whatever on the web are – ehem, talking about your Stack Overflow – I guess we just had a good blogpost/answer together.
Other guys just can’t keep it simple.
We use that method to float our category links in our categories widget off to the right.
Then it occurred to me when we create our social icons widget in the upper right, that the guides on how to float divs left of each other in general were equally as bad!
So here’s how to do it.
How to float divs left side by side or right
Alright, so to make this tutorial really easy for a copy paster (like me) I’ll write the CSS inline with the HTML so you can copy this entire chunk, put in your images, and you’re good to go.
If you’d rather, you can change the “style” to “class” and put the css like width: 100% etc etc in your stylesheet or child theme instead.
Here’s the HTML with inline CSS to make things easier.
<div style="width: 100%;"> <div style="float: left; width: 20%;"><a href="https://www.facebook.com/dearblogger" target="_blank" rel="noopener"><img class="aligncenter" src="https://dearblogger.org/wp-content/uploads/2018/05/facebook-f.png" alt="" width="30" height="30" /></a></div> <div style="float: left; width: 20%;"><a href="https://plus.google.com/118234628825623039266" target="_blank" rel="noopener"><img class="aligncenter" src="https://dearblogger.org/wp-content/uploads/2018/05/google-plus-icon-300x300.png" alt="" width="30" height="30" /></a></div> <div style="float: left; width: 20%;">Another icon</div> <div style="float: left; width: 20%;">Another icon</div> <div style="float: left; width: 20%;">Another icon</div> <div style="clear: both;"></div> </div>
The above HTML/CSS will render to:
Copy paste the above into your site and you can instantly float divs left side by side.
Important things to consider are 1. we use the updated version of clear:both which you need so the page flow and structure stays intact 2. I’ve set a specific width on the icons so they do fit in their spaces and 3. of course the 20% is meant to accommodate 5 icons. If you only have 4 icons or 4 whatevers then make sure the width is 25%. You get the picture.
You can also just change the lefts above to right in order to float divs right side by side.
Conclusion – Let’s hear from you?
I’d really love to hear from the beginner coders and new wordpress developers out there, because honestly (and no offense) no one else usually does.
How did it go floating two divs side by side? Did you learn anything here? Want to join my rant about how guides from sites much larger than ours are way to expert indulging and don’t actually help us that much? Well, I’d be obliged to talk about any of that 🙂
Rant cont’d:
Seriously, when you have to read through someone’s wrong CSS, then some developer theorizing about nonsense, and whole bunch of unnecessary CSS, and still don’t get the answer on StackOverflow? Focus guys 🙂
