Question

I’ve made the jump from HTML table layout for designing webpages to CSS about a week ago and have since been reading more about it. Yesterday, I read a long post here on Stack overflow where users were knocking float and how deprecated they are for layout. There was a lot of talk about inline-block being used in its place.

I have an HTML5 design that I just finished and it looks fantastic in Firefox and Chrome, but when tested in Internet Explorer 7, 8, and 9, the design absolutely explodes. It seems to me that anything in this design that I’ve floated right is not honored in IE. It just seems to wrap under whatever is to the left of it.

I’d like to know if I’m OK with floats or if I should I be using inline-block instead. An example of how to have two divs next to one another where one is on the left side and the other on the right, using inline-block would be nice.

Answer 1

Floats were never meant for layout.

They’re simply meant to take an element, put it to one side, and let other content flow around it. That’s all.

Eric A. Meyer, in Floats Don’t Suck If You Use Them Right

The early web was influenced by print/academic publications where floats are used to control the flow of text around figures and tables.

So why did we use them for layout?

Because you can clear a footer below two floated columns, float layout
came into being. If there had ever been a way to “clear” elements
below positioned elements, we’d never have bothered to use floats for
layout.

Today, the CSS Flexible Box Layout Module flex and the CSS Grid Layout Module grid are optimized for user interface design and complex layouts and are expected to complement each other.

Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts.

Flexbox and Grid are—as of this writing—W3C candidate recommendation and candidate recommendation draft, respectively. Flexbox is supported by all major browsers and has known issues in IE11. Grid is supported by all major browsers but IE11 supports an older version of the spec.