float property vs inline-block

Question

I have columns as below. Is it best practice to do it with float property or inline-block?

+----------------+--------------------+-------------------+
|     col1       |      col2          |    col3           |
|                |                    |                   |
+---------------------------------------------------------+

What does the float property and display property do, and when should I use them?

Did you check out the suggestions you were shown when you entered the question title? eg. [which is correct method inline-block or float?](http://stackoverflow.com/q/15757561) — Pekka, Apr 28 '13 at 10:33
If your question is really "how do I get 3 equal height columns?", you should have asked that instead (or better yet, googled it). — cimmanon, Apr 28 '13 at 12:09
not equal height columns. I mean the differences between them when equal height or unequal height. — luxi, Apr 29 '13 at 03:13
note that I have accepted the answer with his answer not by his comments. and I'm just asking is there too difference when equal or unequal height. that's all. so why down votes? please consider commenting — luxi, Apr 29 '13 at 03:51

score 1 · Accepted Answer · answered Apr 28 '13 at 10:35

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

Problems With float

The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.

This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. A simple example will look like this:

SEE HERE

score 0 · Answer 2 · answered Apr 28 '13 at 12:07

0

Neither. Floats were traditionally used for this because back in the good old IE5 days, that's all we had. If you want equal height columns, display: table-cell is your best bet.

http://tinker.io/619bf/1

answered Apr 28 '13 at 12:07

cimmanon

67,211
17
165
171

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Floating columns is the more common and traditional approach. Bootstrap and Foundation both use floats. However, each method has its drawbacks and it's deciding which drawbacks you want to live with will determine which route you will take. I personally prefer inline-block.

Floats

Floats are easier to set up. If you add this code to the parent element of those floats, it won't collapse.

.parent:after {
    display: block;
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

Add this to col 1, 2, and 3 to make them floats and give them individual widths:

col1, col2, col3 {
    display: block;
    float: left;
}

You might also think about adding border-box so padding and borders don't collapse your grid.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Floats don't have extra white space problems that inline-block naturally does, so it's a reasonable choice, however you cannot position things vertically in floats like you can in inline-blocks without JavaScript.

Inline-block

Inline-blocks have a white space problem you must fix, but the reward is you get to control the elements vertical positioning. Also the parents of inline-blocks don't collapse on them.

col1, col2, col3 {
    display: inline-block;
    margin-right: -0.25em; //This removes the white space created by the "inline" properties of this display type
    vertical-align: top; //Inline-block naturally aligns to the bottom, so this will give it more expected behavior.
}

You don't have to do anything special with the parent, and you don't have to worry as much about how other elements will interact with it. But both ways are effective, only inline-block is a little more capable.

float property vs inline-block

3 Answers3

Floats

Inline-block