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.
Why adding the property float left makes the div behave like an inline-block
Using float
takes the elements out of the normal document flow in a way that other inline
elements can wrap around them; it does not make them behave like inline-block
elements.
If you would like alternative ways to achieve the same effect, give a look at the following examples.
Example 1:
Here's an example using display: flex
on the parent element to make the children stay on the same line.
body { display: flex;}
#block1 { width: 20%; background-color: red; height: 100px;}
#block2 { width: 70%; background-color: yellow; height: 100px;}
<div id="block1"></div><div id="block2"></div>
Equivalent to Float Left and Overflow Hidden
You can do using display:table
and display:table-cell
. like following:
.alert{
display: table;
}
.fa{
display: table-cell;
vertical-align:top;
}
p{
display: table-cell;
padding-left:5px;
}
Fiddle
Advantages of float:left; without its disadvantages
You may just use display: inline-block
(MDN docu), which unlike float: left
does not put the div outside of the page flow.
HTML
<div id="foo" >Hello</div>
<br />
World!
CSS
#foo
{
background-color:red;
height:400px;
display: inline-block;
}
Example fiddle.
Strange behavior while using display inline-block ...why?
The reason is that just like every inline element, your .menu
elements have the default value baseline
for their vertical-align
property. This means that when the browser calculates layout for the .menu
elements that appear side-by-side, each element is positioned so that the baseline of their contents is vertically aligned with that of the others.
In this specific case, this means that the baseline of last line of text in each .menu
is aligned with that of the others. You will notice that by adding more text and making it to occupy three or more lines, the element that contains this text is going to be "pulled upwards" more and more in relation to the others.
Finally, as everyone has said using vertical-align: top
lets the browser know that you want the divs to be aligned with respect to the top of their content, which produces the desired result.
Related Topics
Word-Wrap:Break-Word Not Working in IE8
CSS Display: Table Min-Height Not Working
How to Stop Jquery Mobile to Apply Styles to My Specific Form Elements
Less Mixin a Variable Class Name
How to Watch Changes in Whole Directory/Folder Containing Many SASS Files
Image Scaling by CSS: Is There a Webkit Alternative for -Moz-Crisp-Edges
Expanding the Parent Container with 100% Height to Account for Floated Content
Vertical Align Table-Cell Don't Work with Position Absolute
Bug in CSS3 Rotatey Transition on Safari
Multiple Descendant Children Selector with CSS
Add a Space (" ") After an Element Using :After
iPhone X/8/8 Plus CSS Media Queries
Sass Indented Syntax on Multiple Lines