0

I want to put several divs into a container div, and line them up to make the container look like it has columns inside.

<div>
    <div id="col_1"></div>
    <div id="col_2"></div>
</div>

I can choose those divs to be inline-block or make them float:left with specific width and append a empty div to the last which the css style is clear:both.

Both seem fine, but which way should I do it?

AndyG
  • 39,700
  • 8
  • 109
  • 143
igonejack
  • 2,366
  • 20
  • 29
  • 1
    Possible duplicat [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) – Vucko Feb 19 '14 at 17:05

2 Answers2

0

In a word, if your page needs to run on old browser (less than IE8), consider the float method.

If you have no matter with this, then use display: inline-block (or any of the other new display properties). It's cleaner (as you don't need an HTML element to restore the float) and simpler.

enguerranws
  • 8,087
  • 8
  • 49
  • 97
  • * less than IE 8, not including IE 8 (on which it works) – Itay Feb 19 '14 at 17:09
  • Yes, that's why I said "less than IE8" – enguerranws Feb 19 '14 at 17:10
  • Just wanted to make that clear because I got confused for a second there – Itay Feb 19 '14 at 17:11
  • 1
    It can work in IE6/IE7 if you [use hacks](http://stackoverflow.com/a/6545033/1763929). – Vucko Feb 19 '14 at 17:11
  • I wouldn't recommend to use those hacks. It works now, but what if a new version of IE (or any other browsers) interprete that hack ? – enguerranws Feb 19 '14 at 17:12
  • Or maybe if you set these hacks in lt-ie8 conditionnal comment, so it won't be interpreted by another browser. – enguerranws Feb 19 '14 at 17:15
  • The hack is safe to use (if not using less), I don't know why @enguerranws recommended not to use them. An one more thing `*` targets only IE7, so `*display: inline;` it's taken only from IE7 and nothing else, so there is no problem using them in the css. For the IE6 it's the `_` `_display:inline;`. Just to clear the confusion. – drip Feb 19 '14 at 17:19
  • How do you know this syntax (*property) won't be used in a near futur ? That's why we call that a hack, it's dirty and not futur-proof. – enguerranws Feb 19 '14 at 17:21
  • Because there are standards, and we should follow them...You can say the same thing for every css property, we don't know if it will be there after 3-5 years, so we shouldn't use them? I think there are enough special characters, that can be implemented in the css so it won't overwrite this one. If that is you interpretation of a hack ok. – drip Feb 19 '14 at 17:25
  • '*property' or '_property' are standards ? :D Yeah, follow standards, not hacks. If you follow standards, your site will live long, if you follow hacks, your site can break tomorrow. – enguerranws Feb 19 '14 at 17:30
  • Nope I mean there standards, and there is now way in the standards to overwrite something...You are saying like one day the font-size wont be for the font-size, but for something else, give me one example of something that was overwritten from older css version and I will take my words back. Since `unsafe` is invalid comment in this case. – drip Feb 19 '14 at 17:36
  • I just say those hacks are absolutely non-standards, and that's why we shouldn't use them. I made websites in 2000 with non standard code, hacks, as everyone, it's all broken. Feel free to use hacks. – enguerranws Feb 19 '14 at 17:37
  • Basically, right now W3C is working on variables, new selectors, and lot of things. What if they use '*property' syntax ? As it's not a standard use, they could easily consider it. – enguerranws Feb 19 '14 at 17:44
0

It's a personal choice.

When using float you must clear them, so like you said you can add a clearing div or make the container with overflow: auto;.

When using inline-block you should have in mind you should add font-size: 0 to the parent div to remove the spacing between the divs and add the default font-size to the divs. (there is the negative margin fix, but I don't personally like it)

If you want the col1 to be in the left and col2 to be at right, better use floats (left/right).

If you want the cols to be verticaly aligned in the middle/bottom, better use inline-block.

But for most other cases is personal choice.

drip
  • 12,378
  • 2
  • 30
  • 49