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,753
  • 72
  • 57
  • 129
FlorianB
  • 2,188
  • 18
  • 30
  • 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,825
  • 4
  • 14
  • 28