CODEWITHSUNDEEP
csshtml
Muzz
Muzz

Reputation: 687

Is float for layout bad? What should be used in its place?

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.

Upvotes: 45

Views: 38902

Answers (4)

melhosseiny
melhosseiny

Reputation: 10144

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.

Upvotes: 70

MGOwen
MGOwen

Reputation: 7299

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.

Upvotes: 46

Mostafa Maklad
Mostafa Maklad

Reputation: 347

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

Upvotes: -1

callumacrae
callumacrae

Reputation: 8433

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

Upvotes: 0

Related Questions