h1 display: inline-block messes up floats. potential chrome bug?

Question

i have an odd issue that's only showing up in chrome. version 42.0.2311.135 in case that's part of the issue. internet explorer and firefox render the page properly.

jsfiddle demo: http://jsfiddle.net/53m8arfy/

 div.left {float: left;} div.right {float: right;} h1.broke {border-bottom: 1px solid #e2e2e2; display: inline-block; width: 100%;} h1.works {border-bottom: 1px solid #e2e2e2;} 

 <h1 class="broke">header</h1> <div class="left"> <p>short content</p> </div> <div class="right"> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> </div> <br style="clear: both;" /> <div class="left"> <p>short content</p> </div> <div class="right"> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> </div> <br style="clear: both;" /> <div class="left"> <p>short content</p> </div> <div class="right"> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> </div> <br style="clear: both;" /> 

the h1 at the top is set to class="broke". if you're seeing what i am, all the floats below are messed up.

changing the h1 at the top to class="works" [which removes inline-block and associated width] makes everything happy.

my google-fu isn't able to find any bug report or anyone else with this issue, though it's not the easiest thing to search for.

Answer 1

It works as intended when you replace <br style="clear:both" /> with <div style="clear:both"></div> .

Seems to be a specialty in how Chrome handles <br> . The problem is that a <br> in chrome has width and height set to auto , which could possibly be something like zero.

When looking at CSS Spec , I didn't find it unambiguously defined whether an empty element with height and width set to auto even has sides of an element's box(es) [which] may not be adjacent to an earlier floating box. But then, digging further, I found that the following will also work in Chrome:

<br style="clear: both; height:2px" />

while this "won't work", also in Firefox and IE (I got the CSS by looking at Chrome's default CSS for <br> ):

<div style="display:inline; clear: both; width:auto; height:auto; "></div>

So this is not about CSS spec, but the (unresolved, unstandardized) question which default CSS styles to apply to which HTML element.

Answer 2

I'd recommend removing the , <br> elements as they serve no semantic meaning, and adding the clear:both rule to the div.left rules you currently have:

 div.left { clear: both; float: left; } div.right { float: right; } h1.broke { border-bottom: 1px solid #e2e2e2; display: inline-block; width: 100%; } h1.works { border-bottom: 1px solid #e2e2e2; } 

 <h1 class="works">header</h1> <div class="left"> <p>short content</p> </div> <div class="right"> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> </div> <div class="left"> <p>short content</p> </div> <div class="right"> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> </div> <div class="left"> <p>short content</p> </div> <div class="right"> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> <p>long content</p> </div> 

Answer 3

I have no idea why you aren't just using text-align:right; instead of floats for paragraph elements.