Skip to content
infront webworks logo
  • Home
  • Digital Marketing

      Digital Marketing

    • SEO
      • Enterprise SEO and Digital Marketing
      • Local SEO
      • SEO Audit
      • SEO Consulting
      • SEO Services
      • SEO Tools
      • SEO Workshops
      • Small Business SEO
      • White Label SEO
    • SEM | Search Engine Marketing | PPC
      • Ads & PPC
      • Advertising Management
      • Content Marketing Strategy
      • Conversion Rate Optimization
      • Reputation Management
    • Social Media Marketing
      • Facebook
      • Instagram
      • LinkedIn
      • Pinterest
      • Twitter
  • Websites

      Websites

    • Web Development
      • Business Websites
      • Custom Web Applications
      • Small Business Websites
      • Sitefinity CMS
      • Website Costs
      • Website Evaluation
      • WordPress
    • Web Design
      • Ecommerce
      • Mobile First Web Design
      • Site Speed Optimization
    • Cloud Services
      • Domain Registration
      • Web Hosting
      • Website SSL Certified
  • About

      About

    • The Team
    • Why Infront Webworks
    • Jobs
      • SEO Jobs
      • Website Development Jobs
  • Case Studies

      Case Studies

    • SEARCH ENGINE OPTIMIZATION CASE STUDIES
      • Assisted Living SEO
      • Attorney & Law SEO
      • Automotive SEO
      • Criminal Attorney SEO
      • Dentist SEO
      • E-Commerce SEO​
      • Employment/Staffing SEO
      • Finance SEO
      • Hospitality SEO
      • Home Services SEO
      • Manufacturing SEO
      • Medical & Health Care SEO​
      • Non-Profit SEO​
      • Retail SEO
      • Real Estate SEO
      • Religious SEO
      • Travel and Leisure SEO
    • Web Development Case Studies
      • Small Business Web Design
      • Medium Business Web Design
      • WordPress Web Design
      • Church Web Design
      • Large Business Web Design
      • Nonprofit Web Design
  • Blog
  • Contact

      Contact

    • Support
Request a Quote or (719) 577-4404

Home > Blog > Web Design > Dreaded Floaters – Cleaning up your CSS

Dreaded Floaters – Cleaning up your CSS

  • July 30, 2020
  • 8:05 am
  • By: Mike Hodgdon
  • No Comments
Dreaded Floaters - CSS driven layout and the quest to clean up the mess
Dreaded Floaters - CSS driven layout and the quest to clean up the mess

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.

About the Author

Loading...
Michael Hodgdon Chief Operations Officer
Michael Hodgdon
Chief Operations Officer

Mike is the COO at Infront Webworks. An online entrepreneur since 1997, he has owned or run website design / SEO, online marketing and internet advertising companies for over 15 years. Featured in Entrepreneur Magazine, Colorado Springs Business Journal and with projects featured in N.Y. Times, L.A. Times, he has a solid track record of successful online undertakings. He has Digital Marketing and Marketing certifications from Cornell University, is a certified Yext Partner, Google Certified in Analytics, Tag Manager, AdWords, Online Display Advertising, Shopping and Video Advertising.

Search

Categories

Featured Posts

What is Chat GPT?
Mike Hodgdon Mon, 03 Apr 2023

Introduction to Chat GPT In the ever-evolving landscape of artificial intelligence (AI), one term that frequently surfaces is ‘Chat GPT’. But what exactly does it

Read More
How to Become a Google Partner and the Google Partners Program
Mike Hodgdon Thu, 02 Mar 2023

Introduction to Google Partners Program 2023 Ever landed on a webpage and found yourself intrigued by an impressive Google Partner badge? Allow us to enlighten

Read More
Artificial Intelligence in SEO: Uses, Impacts, and Pitfalls
Mike Hodgdon Wed, 22 Feb 2023

Artificial intelligence (AI) is transforming almost every industry, including content marketing and search engine optimization (SEO). A 2021 report by the American Marketing Association in

Read More
How To Recover from Google’s May 2022 Algorithm Update
Mike Hodgdon Tue, 20 Dec 2022

Getting on the first page of Google is an investment that brings invaluable returns. So, it’s no wonder that every time Google releases a new

Read More
How To Optimize for Google’s Free Shopping Carousel
Mike Hodgdon Tue, 01 Nov 2022

Where do you think most searchers go when looking for something to buy online? If you thought the answer was search engines like Google, you’re

Read More
Google Business Profile Ownership Request Email Scam
Mike Hodgdon Thu, 20 Oct 2022

Have you recently started receiving emails from Google letting you know that someone is trying to claim ownership of your Google Business Profile (Formerly Google

Read More
Talk with a local rep: Boulder SEO | Colorado Springs SEO | Denver SEO | Irvine SEO | Las Vegas SEO | Madison SEO | Tempe SEO

Infront Webworks

5350 Tomah Dr #2800
Colorado Springs, CO 80918


Follow Us

Facebook-f Twitter Instagram Linkedin Youtube Rss

HAVE QUESTIONS OR NEED HELP?

SALES: (719) 577-4404 SUPPORT: (719) 359-5540 BILLING: (719) 577-4404 FAX: (719) 630-7073
Open a Support Ticket
© Infront Webworks 2022

Terms of Service | Privacy Policy | Jobs | Company | The Team | HTML Sitemap | XML Sitemap