0

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
Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
FlorianB
  • 1,967
  • 16
  • 26
  • Use `display: inline-block` instead of `float` – Vitalii Chmovzh Feb 10 '18 at 16:12
  • Because it floats UP first...then left. If you don't want this behaviour... *don't use floats*! – Paulie_D Feb 10 '18 at 17:37
  • ...also where would you expect "D" to be placed...up under "B" or directly next to "C"? Sounds like you want a *masonry* layout...and that's been asked hundreds of times before. – Paulie_D Feb 10 '18 at 18:27
  • https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally – Paulie_D Feb 10 '18 at 18:30
  • @VitaliiChmovzh: please post as an answer, this is indeed the way! I previously tied inline-block but forgot to remove the float! haha – FlorianB Feb 10 '18 at 20:10

1 Answers1

1

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.

Vitalii Chmovzh
  • 2,675
  • 4
  • 13
  • 27