float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
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 wholefloat
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, wheredisplay:inline; zoom:1
is a fall-back hack for the broken support forinline-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 thattable-cell
is designed to be used in a context of being inside elements that are styled astable
andtable-row
; usingtable-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
Hope that helps.
Using CSS display:inline-block or float:left with mixed amounts of text
Using table based markup is not the answer. However, iff you don't need to support IE7 or lower, you can use display:table
to solve this. Check out this demonstration i threw together. Edit the amount of content in the second child div to see the effect.
jsfiddle demonstrating display:table
.parent {
display:table;
}
.child {
display:table-cell;
}
Basically, you tell the parent
element to act like a table, the two child
elements to act like table cells. This gives you the benefits of the table layout without the accessibility problems and extra markup of html tables. As I mentioned though, this doesn't work in IE7. If you need old IE support, you'll have to resort to less graceful workarounds :(
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
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 wholefloat
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, wheredisplay:inline; zoom:1
is a fall-back hack for the broken support forinline-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 thattable-cell
is designed to be used in a context of being inside elements that are styled astable
andtable-row
; usingtable-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
Hope that helps.
Inline-Block vs. Float - Different widths?
It's simple. If you add a background: red
to your li
rules you will see that there is a small gap between each li
. The gap is not a margin or padding but a whitespace character (a space) which is created when the browser 'collapses' your newlines and tabs. The issue here is your inline elements respect whitespace but floated elements do not.
There are several solutions based on your requirements and how 'hacky' you want to get. You can see them here: Ignore whitespace in HTML
Personally I'd use display:table-cell
for my li
as it enjoys the best browser support and is the least hacky approach
ul.table {display:table; width:100%}
ul.table > li {display: table-cell; padding: 0; margin:0;}
An equally valid (but less readable) solution would be the remove the whitespace from the source like so:
<ul><li><a href="#">Item #1</a></li><li><a href="#">Item #2</a></li></ul>
This will work in any browser, even IE4. Some people do this with comments to hide the whitespace but I think that's an abuse of comment semantics and still looks ugly in the source anyway.
What is the difference between inline-block and inline-table?
display:table
will make your tag behave like a table.inline-table
just means that the element is displayed as an inline-level table. You can then do table-cell
to let your element behave like a <td>
element.
display:inline
- displays your element as an inline element (like <span>
), and inline-block
will just group them together in a block container.
As the other answer suggested you can replace between the two as long as you follow the display convention in the rest of your code. (i.e. use table-cell
with inline-table
and not with inline-block
).
Check this link for more info on display
.
Related Topics
Css Grid Layout Not Working in Ie11 Even With Prefixes
How to Set Tbody Height With Overflow Scroll
How to Add a Browser Tab Icon (Favicon) For a Website
Open Link in New Tab or Window
How to Apply Hovering on HTML Area Tag
Default Select Option as Blank
Heights Rendering Differently in Chrome and Firefox
How to Send Email from HTML Form
How to Remove Underline from a Link in Html
Expanding a Parent ≪Div≫ to the Height of Its Children
Create HTML Table With SQL For Xml
Resize Image Proportionally With Css
How to Expand Floated Child Div'S Height to Parent'S Height
Do I Encode Ampersands in ≪A Href...≫
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do