Problem with float:left – unexpected behavior [closed]

Add clear:both; to your title.

example: https://jsfiddle.net/wap27kuv/

edit: the code is behaving as it should, floated elements will make the sibling elements that has no clear property align to the side of the floated elements. Setting clear:both to your title, stops the floating behavior. You could also use clear:left and it’d work perfectly in this case. This is a brief explanation, you could check this link for more detail about clear/float property with examples: CSS Layout – float and clear