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

You can use this example in inline

<div id="firstdiv">
    That is the first div
</div>
<div id="seconddiv">
    That is the second div
</div>

style.css

 #firstdiv{
        display:inline;
        background-color: #f00;
    }

    #seconddiv{
        display:inline;
        background-color: #00f;
    }

it will be work at IE8 and higher but if you wanna use it in IE6 and 7 make the following code in style.css

#firstdiv{
    display:block;
    background-color: #f00;
    float: left;
}

#seconddiv{
    display:block;
    background-color: #00f;
    float: right;
}

if you use HTML5 and CSS3 and you want it work with IE6 read the following article 5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress

you can read that article too it is very useful difference between block, inline and inline-block

Answer 2

Floats should work fine, although it depends on how you've used it - how about a link to your design?

inline-block doesn't work correctly in Internet Explorer versions less than 8: http://www.quirksmode.org/css/display.html

Answer 3

This question is from 2012 and the other answers are outdated.

Floats should not be used for layout anymore (though you can still use them for the original purpose - floating text around images).

Flexbox is now widely supported and is better for layout.

Answer 4

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.

So why are we using 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.

Why are we still using them for layout?

Because better alternatives, like the CSS Flexible Box Layout Module and the CSS Template Layout Module are still working drafts and are not supported by all browsers.

Why does your design break in IE 7,8 and 9?

There's probably a problem with your code, that is, you're not using floats right. This is not totally your fault, since they were never meant for layout in the first place. However, I can assure you that they work. I have been using floats for layout for a long time and was always able to make it work in most browsers.

Are inline blocks better?

Many layouts that can be done with floats can be done with inline blocks. However, they don't solve every layout problem and they were not meant for layouts as well. I find that one of them will usually be more suitable for the intended layout.

References

Floats Don’t Suck If You Use Them Right