Search code examples
csslayoutrowcss-tables

How to make a float:left go all the way left regardless of the height of the previous elements?


CSS float left issue

I suppose the picture is self-explanatory. This is a common issue when dealing with float elements. Anyone has a trick to force C to go all the way to the left?

IMPORTANT:

  • The height of each element is determine by its content.
  • clear:left is not an option because responsive design will transform the layout into a single-column layout.
  • display:table is not an option either for the same reason

Solution

  • In that case it's better to use display: inline-block; rather than float:left; Inline block will behave both like block and inline, therefore line-height will equal to the "highest" word in the line in that case it will be the highest block.