JQuery in Chrome returns "block" instead of "inline"

Question

I have two divs that are inline. they both have the same styles, and it is important that both are inline.

JQuery reports that their css-display is only displayed by the chrome block. I really need to know that these two are built-in.

jsfiddle here

CSS

div { display: inline; width: 50%; float: left; height: 100px; text-align: center; font-weight: bold; padding: 10px; box-sizing: border-box; } .div1 { background-color: black; color: white; border: 2px solid grey; } .div2 { background-color: white; color: black; border: 2px solid black; } 

HTML:

 <div class="div1">1</div> <div class="div2">2</div> 

JQuery

 jQuery("div").click(function() { jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>"); }); jQuery("div").click(); 

Does anyone know what is happening or more importantly what can I do? (other than pulling my hair ... it started to hurt;))

Answer 1

As I said in my comment, float: left forces display: block .

Here is the relevant information in the specification:

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

An element generates a block block that moves to the left.

And then:

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Otherwise, if "float" has a value other than "none", the field floats and 'display' is set as below.

To summarize the specified table: float = display: block .