The secret to designing website layouts without CSS floats


Saturday 07th, Nov, 2015 | #CSS2 / CSS3 #UI

View More

If you have been designing for the Web at all over the past decade you are undoubtedly familiar with the CSS float property. Since the industry (thankfully) adopted the principle of tableless layouts, floats have been the weapon of choice most of us use to lay out our web pages, but is it the best choice?

Despite the popularity of this method it is regularly the cause of frustration and confusion for new designers and becomes a problem when floated elements are left “uncleared”. These uncleared floats can cause multiple issues ranging from sloppy aesthetics to complete inaccessibility. With a small project it’s pretty simple to trouble shoot a float issue but when working on a large web app with dynamic content it can be a tad bit trickier, eating up precious time and costing you money.