css - Are floats bad? What should be used in its place

Question

I've made the jump from table design to css about a week ago and have since been reading more about it. Yesterday, I read a long post here on SO where the posters were knocking floats and about how depreciated they are. There was a lot of talk about inline-block being used in its place.

I have a HTML5 design that I just finished and it looks fantastic in firefox and chrome but when tested from other computers running Internet Explorer versions 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.

I have another dilemma here that hopefully someone can help me with. I am on an old development machine running XP SP1. The best IE browser I can test with is 6. I'd like to somehow get a hold of something that will allow me to test versions 7, 8 and 9 (and 10 if it's out yet). Can someone recommend any solution for this?

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.

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

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.

The CSS Flexible Box Layout Module and the CSS Grid Layout Module are as of this writing W3C candidate recommendation and candidate recommendation draft respectively. Both were optimized for user interface design and complex layouts and are expected to complement each other. flexbox focuses on bottom-up 1 dimensional layouts and grid focuses on top-down 2 dimensional layouts.

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.