Comments on: Cross-Browser Inline-Block http://ajaxian.com/archives/cross-browser-inline-block Cleaning up the web with Ajax Sun, 14 Mar 2010 06:53:59 -0500 http://wordpress.org/?v=2.8.4 hourly 1 By: i8ramin http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271719 i8ramin Mon, 02 Mar 2009 01:34:17 +0000 http://ajaxian.com/?p=6061#comment-271719 If you know that you will always display 4 items per row, you could simply wrap a DIV around them (the 4 items per row). This will achieve the same thing w/o doing all the hacks. You just float the items and clear the outer DIVs. However, if you have a liquid layout and you can't guarantee the number of cells per row, then this is a pretty nice work around. Then again, if you are comparing this to a TABLE layout approach, you need to know ahead of time how many cells you want to display per row. In which case, I choose the DIV wrapping approach over this. If you know that you will always display 4 items per row, you could simply wrap a DIV around them (the 4 items per row). This will achieve the same thing w/o doing all the hacks. You just float the items and clear the outer DIVs. However, if you have a liquid layout and you can’t guarantee the number of cells per row, then this is a pretty nice work around. Then again, if you are comparing this to a TABLE layout approach, you need to know ahead of time how many cells you want to display per row. In which case, I choose the DIV wrapping approach over this.

]]> By: LeifOO http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271693 LeifOO Sat, 28 Feb 2009 12:29:20 +0000 http://ajaxian.com/?p=6061#comment-271693 Hedger Wang also has a couple of nice posts about this topic: http://blog.hedgerwow.com/2007/11/14/item-list-grid-real-world-practice-with-displayinline-block-across-browsers/ http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html Hedger Wang also has a couple of nice posts about this topic:
http://blog.hedgerwow.com/2007/11/14/item-list-grid-real-world-practice-with-displayinline-block-across-browsers/
http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html

]]> By: edeverett http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271569 edeverett Tue, 24 Feb 2009 15:21:46 +0000 http://ajaxian.com/?p=6061#comment-271569 Yeah, it's a good technique. I left a comment with a similar demo when the CSS vs Tables nonsense was going on again last year : http://ajaxian.com/archives/css-and-tables-the-war-continues#comment-269059 Not enough people know about this and only think about floats. But for l flexible grid layout without tables this can often be the solution. Yeah, it’s a good technique. I left a comment with a similar demo when the CSS vs Tables nonsense was going on again last year : http://ajaxian.com/archives/css-and-tables-the-war-continues#comment-269059

Not enough people know about this and only think about floats. But for l flexible grid layout without tables this can often be the solution.

]]> By: eyelidlessness http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271552 eyelidlessness Tue, 24 Feb 2009 09:27:27 +0000 http://ajaxian.com/?p=6061#comment-271552 @starkraving: IE6 treats the following roughly the same: <code>InlineElement { display: inline-block; }</code> and <code>BlockElement { display: inline; zoom: 1; }</code> @starkraving: IE6 treats the following roughly the same:

InlineElement {
display: inline-block;
}
and
BlockElement {
display: inline;
zoom: 1;
}

]]> By: starkraving http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271550 starkraving Tue, 24 Feb 2009 06:01:11 +0000 http://ajaxian.com/?p=6061#comment-271550 inline-block is better than float:left because you don't have to clear it afterwards. I wish I knew about this earlier than the last few months but it's really cool. It seems to be much more supported cross-browser (read IE6) when used on elements that are normally inline, like links or spans etc inline-block is better than float:left because you don’t have to clear it afterwards. I wish I knew about this earlier than the last few months but it’s really cool. It seems to be much more supported cross-browser (read IE6) when used on elements that are normally inline, like links or spans etc

]]> By: tj111 http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271545 tj111 Mon, 23 Feb 2009 17:47:30 +0000 http://ajaxian.com/?p=6061#comment-271545 @ExtAnimal: did you read the article? It explains how if an element has slightly more stuff in it and expands vertically, the next line of elements will float against that larger element. @ExtAnimal: did you read the article? It explains how if an element has slightly more stuff in it and expands vertically, the next line of elements will float against that larger element.

]]> By: ExtAnimal http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271538 ExtAnimal Mon, 23 Feb 2009 08:59:30 +0000 http://ajaxian.com/?p=6061#comment-271538 Mmm. But if all you have in that container is a set of inline block elements, then what's the difference between that and floating them all left? Mmm. But if all you have in that container is a set of inline block elements, then what’s the difference between that and floating them all left?

]]> By: unscriptable http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271537 unscriptable Sun, 22 Feb 2009 22:58:42 +0000 http://ajaxian.com/?p=6061#comment-271537 Darn @phiggins! You beat me to it! :-) @GreLi: use display:-moz-inline-boxinstead of display:-moz-inline-stack to shrink-wrap in FF2. Darn @phiggins! You beat me to it! :-)
@GreLi: use display:-moz-inline-boxinstead of display:-moz-inline-stack to shrink-wrap in FF2.

]]> By: GreLI http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271536 GreLI Sun, 22 Feb 2009 17:35:03 +0000 http://ajaxian.com/?p=6061#comment-271536 Nice, but works only because it have fixed width and height, and those inline-blocks aren't links. When you want shrinked-fit width in Firefox 2 (especially with links) you are in trouble. Nice, but works only because it have fixed width and height, and those inline-blocks aren’t links. When you want shrinked-fit width in Firefox 2 (especially with links) you are in trouble.

]]> By: phiggins http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271532 phiggins Sun, 22 Feb 2009 13:57:47 +0000 http://ajaxian.com/?p=6061#comment-271532 Looks just like Dijit's .dijitInline class: http://bugs.dojotoolkit.org/browser/dijit/trunk/themes/dijit.css#L25 Looks just like Dijit’s .dijitInline class:

http://bugs.dojotoolkit.org/browser/dijit/trunk/themes/dijit.css#L25

]]> By: Jordan1 http://ajaxian.com/archives/cross-browser-inline-block/comment-page-1#comment-271531 Jordan1 Sun, 22 Feb 2009 13:46:40 +0000 http://ajaxian.com/?p=6061#comment-271531 More people should learn this instead of using floats. More people should learn this instead of using floats.

]]>