Question

Please could someone help me understand why the div.fl element shown in Developer Tools below has display: block in the Computed Style section?

It is being displayed as a block-level element.

But the list of CSS rules below shows that display: inline ! important is the rule with the highest priority – the div: block directive has a strikethrough.

I would like it to display inline, but I’m not sure what else I can do besides use div.fl { display: inline ! important; } in my code.

I’m afraid I can’t link to the code, but could anyone even suggest where to start looking? I don’t understand where the block directive could be coming from.

Debugging CSS = my least favourite part of coding.

Answer 1

I see a float: right declaration in your screenshot. Floated elements are always rendered as blocks; you can’t make your element display: inline if it’s floated. See the spec for the float property for the gory details.