283

My Question(s)

  1. Are any of these methods preferred by a professional web designer?

  2. Are any of these methods prefereed by a web browser when drawing the website?

  3. Is this all just personal preference?

  4. Are there other techniques I'm missing?

Note: Above questions are in regards to designing a multi-column layout

float:left;

http://jsfiddle.net/CDe6a/

float:left image

This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both; afterwards. Another con that I just found was the inability to align text vertically.

display:inline;

This seems to correct the problem of the collapsing parent, but adds whitespace.

http://jsfiddle.net/CDe6a/1/

display:inline image

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.

http://jsfiddle.net/CDe6a/2/

no html whitespace image

display:inline-block;

Seems to behave exactly like display:inline;.

http://jsfiddle.net/CDe6a/3/

display:inline-block image

display:table-cell;

http://jsfiddle.net/CDe6a/4/

display:table-cell image

Works perfect.

My thoughts:

I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell; seems to work the best, and I think I will start replacing float:left; as I always seem to mess up on clear:both;. I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.

EGHDK
  • 17,818
  • 45
  • 129
  • 204
  • 4
    See what the guys at html5boilerplate and Twitter Bootstrap use and stick with it – Robert Niestroj Aug 06 '12 at 06:53
  • 1
    There is a great article about fighting the space at css-tricks: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – Lea Rosema Apr 08 '15 at 15:08
  • I tried using the `display: inline` property and I found that it does not take care of padding on the child elements correctly. But if I use the `display: inline-block` this is taken care automatically. Please see the link - http://codepen.io/prashdeep/pen/rVOyvd Please let me know your inputs on the same – zilcuanu May 05 '15 at 16:34

6 Answers6

203

Of the options you asked about:

  • float:left;
    I dislike floats because of the need to have additional markup to clear the float. As far as I'm concerned, the whole float concept was poorly designed in the CSS specs. Nothing we can do about that now though. But the important thing is it does work, and it works in all browsers (even IE6/7), so use it if you like it.

The additional markup for clearing may not be necessary if you use the :after selector to clear the floats, but this isn't an option if you want to support IE6 or IE7.

  • display:inline;
    This shouldn't be used for layout, with the exception of IE6/7, where display:inline; zoom:1 is a fall-back hack for the broken support for inline-block.

  • display:inline-block;
    This is my favourite option. It works well and consistently across all browsers, with a caveat for IE6/7, which support it for some elements. But see above for the hacky solution to work around this.

The other big caveat with inline-block is that because of the inline aspect, the white spaces between elements are treated the same as white spaces between words of text, so you can get gaps appearing between elements. There are work-arounds to this, but none of them are ideal. (the best is simply to not have any spaces between the elements)

  • display:table-cell;
    Another one where you'll have problems with browser compatibility. Older IEs won't work with this at all. But even for other browsers, it's worth noting that table-cell is designed to be used in a context of being inside elements that are styled as table and table-row; using table-cell in isolation is not the intended way to do it, so you may experience different browsers treating it differently.

Other techniques you may have missed? Yes.

  • Since you say this is for a multi-column layout, there is a CSS Columns feature that you might want to know about. However it isn't the most well supported feature (not supported by IE even in IE9, and a vendor prefix required by all other browsers), so you may not want to use it. But it is another option, and you did ask.

  • There's also CSS FlexBox feature, which is intended to allow you to have text flowing from box to box. It's an exciting feature that will allow some complex layouts, but this is still very much in development -- see http://html5please.com/#flexbox

starball
  • 20,030
  • 7
  • 43
  • 238
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 2
    you don't need additional markup to clear floats, see my answer on that. – Lie Ryan Aug 09 '12 at 09:12
  • The `inline-block` caveat for IE6/7 is only true on elements that are `display: block` by default such as `
    ` elements. It works fine for elements such as `` that were `inline` to begin with.
     – Alex W Mar 02 '13 at 19:40
  • 2
    I always use `inline-block` because it's made exactly for these cases. – Rápli András Jul 27 '13 at 12:10
  • 1
    A good method for removing the whitespace that display:inline-block creates, you can set the font-size to 0 on the container element, then set the desired for the inline elements themselves. This avoids to need to remove whitespace in the html – AlexMorley-Finch Mar 31 '14 at 23:22
  • 1
    @AlexMorley-Finch: Indeed, that is one good solution. Be aware, however that it doesn't work if you're using font sizes in `em`s. That means it may not be a suitable solution for all cases. You may also like to see [this answer](http://stackoverflow.com/questions/11235151/how-do-i-get-rid-of-white-spaces-between-spans-without-manipulating-the-html/11235652#11235652) I posted separately, which covers this point, and other options for dealing with the white space issue. – Spudley Apr 01 '14 at 08:32
  • I use floats for that they are intended, to say float an image in a block of text and have the text flow nicely around it, but for positioning block level elements or creating columns I do not like. People abuse float way too much. – Taylor Huston May 02 '14 at 23:32
  • When generating a website/ouput using server side like PHP or even Javascript, you rarely end up with white space anyway.. As long as you account for it, everything is clean and simple. – Angry 84 Apr 15 '15 at 08:38
35

I usually use float: left; and add overflow: auto; to solve the collapsing parent problem (as to why this works, overflow: auto will expand the parent instead of adding scrollbars if you do not give it explicit height, overflow: hidden works as well). Most of the vertical alignment needs I had are for one-line of text in menu bars, which can be solved using line-height property. If I really need to vertical align a block element, I'd set an explicit height on the parent and the vertically aligned item, position absolute, top 50%, and negative margin.

The reason I don't use display: table-cell is the way it overflows when you have more items than the site's width can handle. table-cell will force the user to scroll horizontally, while floats will wrap the overflow menu, making it still usable without the need for horizontal scrolling.

The best thing about float: left and overflow: auto is that it works all the way back to IE6 without hacks, probably even further.

enter image description here

Lie Ryan
  • 62,238
  • 13
  • 100
  • 144
  • This excellent point, not mentioned in MANY popular tutorials. Couple of questions: Is this actually tested in different browsers? What's your method of choice to draw separator between two blocks such as nav and content? The reason I ask is because if above divs are of different height it would be difficult. – Shital Shah Nov 09 '13 at 11:08
  • @ShitalShah: I'm not quite sure what you mean by "this", but I've implemented countless horizontal menu and the float left and overflow is IMO the cleanest and most reliable way to implement horizontal menu across many different browsers, old and new. For adding separators, I'd usually use left border (or background images for fancier separators, if you don't need to care about old browser's then you can also use CSS3 border-image). I don't quite understand what you mean by differing heights, want to explain more or add a fiddle? – Lie Ryan Nov 09 '13 at 11:44
  • 1
    This cleared up a lot about clearing and I didnt know that overflow could do this. Im used to the :after method where u add a content: "." and visibility:hidden. Thanks for this – chasethesunnn Apr 26 '15 at 02:09
9

I'd say it depends on what you need it for:

  1. If you need it just to get 3 columns layout, I'd suggest to do it with float.

  2. If you need it for menu, you can use inline-block. For the whitespace problem, you can use few tricks as described by Chris Coyier here http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

  3. If you need to make a multiple choice option, which the width needs to spread evenly inside a specified box, then I'd prefer display: table. This will not work correctly in some browsers, so it depends on your browser support.

Lastly, what might be the best method is using flexbox. The spec for this has changed few times, so it's not stable just yet. But once it has been finalized, this will be the best method I reckon.

Zendy
  • 1,664
  • 1
  • 17
  • 24
  • +1 for the link to Chris Coyier's article. One addition to his list is the method that YUI's [Pure CSS](http://purecss.io/) grids use: https://github.com/yui/pure/blob/master/src/grids/css/grids-core.css – Web_Designer Aug 09 '13 at 16:07
4

I prefer inline-block, although float is also useful. Table-cell isn't rendered correctly by old IEs (neither does inline-block, but there's the zoom: 1; *display: inline hack that I use frequently). If you have children that have a smaller height than their parent, floats will bring them to the top, whereas inline-block will screw up sometimes.

Most of the time, the browser will interpret everything correctly, unless, of course, it's IE. You always have to check to make sure that IE doesn't suck-- for example, the table-cell concept.

In all reality, yes, it boils down to personal preference.

One technique you could use to get rid of white space would be to set a font-size of 0 to the parent, then give the font-size back to the children, although that's a hassle, and gross.

Chad
  • 5,308
  • 4
  • 24
  • 36
  • if "you always have to check that IE doesn't suck" then you'll always be disappointed. hehe. (On the other hand, he's quite right to say you should always check that your code doesn't suck in each version of IE you want to support) – Spudley Aug 06 '12 at 06:23
4

For the record only, to add to Spudley's answer, there is also the possibility to use position: absolute and margins if you know the column widths.

For me, the main issue when chossing a method is whether you need the columns to fill the whole height (equal heights), where table-cell is the easiest method (if you don't care much for older browsers).

HamZa
  • 14,671
  • 11
  • 54
  • 75
Wtower
  • 18,848
  • 11
  • 103
  • 80
1

I prefer inline-block, but float are still useful way to put together HTML elemenets, specially when we have elements which one should stick to the left and one to the right, float working better with writing less lines, while inline-block working well in many other cases.

enter image description here

Alireza
  • 100,211
  • 27
  • 269
  • 172