Which is the correct method, inline-block or float?

Question

I am designing a layout for a site and am confused about when to use inline-block or float. Which is the best way: inline-block or float?

Using inline-block means it doesn't spport Internet Explorer. Sometimes float is also doing damage (even using the clearfix hack).

use Table instead of CSS layout if you are really worried of IE support. — Raptor, Apr 02 '13 at 06:31
clear fix works in all cases. So, use float property as you are concerned about cross-browser. — Mr_Green, Apr 02 '13 at 06:34
possible duplicate of [float:left; vs display:inline; vs display:inline-block; vs display:table-cell;](http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell) — Mr_Green, Apr 02 '13 at 06:39
@VIVEkUI not an answer to you question. but have you looked at _compass(sass)_ or _less_ already? it helps to create cross browser `inline-block` or `clear-fix` rules and helps with using new css features that are vendor prefixed in older browsers. — t.niese, Apr 02 '13 at 08:15

score 1 · Accepted Answer · edited Jul 02 '14 at 19:04

1

Please refer to the article Should You Use Inline-Blocks As A Substitute For Floats. It will help you a lot.

edited Jul 02 '14 at 19:04

Peter Mortensen

30,738
21
105
131

answered Apr 02 '13 at 06:31

Sachin

40,216
7
90
102

score -2 · Answer 2 · edited Jul 02 '14 at 19:07

-2

For a layout, you should use neither.

According to http://www.w3schools.com/cssref/pr_class_display.asp#gsc.tab=0, all inline attributes are supported by Internet Explorer 8+, so it should be OK if you're not developing a commercial website.

I recommend using <div> and HTML5 elements such as <header> and <article>. For example,

<body>
  <header>
    <div id="logo">
      <img src="myLogo.png" alt="logo"/>
    </div>
    <nav>
    </nav>
  </header>
  <div id="pageContainer">
    <article>
      <section>
        ...
      </section>
    </article>
  </div>
</body>

Then for individual elements in each <div>, you can define inline or float (like a picture or a table).

<div>: basically, a section of a webpage.

List of sweet HTML5 elements!: http://www.w3schools.com/html/html5_new_elements.asp#gsc.tab=0

Example: http://jsfiddle.net/JYZhz/

edited Jul 02 '14 at 19:07

Peter Mortensen

30,738
21
105
131

answered Apr 02 '13 at 06:35

mn.

796
6
12

on the one hand you say that it is only ok to use `inline-block` for none commercial sites, on the other hand you recommend using html5 elements, which (if used in an IE version that doesn't support them) could break the layout more then using unsupported `inline-block`. for both html5 and inline block there are fixes to get them work in IE 6+. Additional html elements are not for layout but for semantic/logical structuring, css is for layout/styling. – t.niese Apr 02 '13 at 08:08
true, cheers for pointing that out. Was just answering the question based on a few assumptions :) – mn. Apr 02 '13 at 08:11

Which is the correct method, inline-block or float?

2 Answers2

Linked