I have a problem, which I know it’s the default behaviour of the HTML/CSS. But my question is how this problem can be solved?
A codepen simulating the problem is available here:
Basically the question is, how to avoid the space above the “BLA BLA 2″?
PS: I have previously tried searching for a solution, but with no luck :(
Thanks in advance!
You can’t….it’s as basic as that.
I can’t recall right now if newer layout methods (such as flexbox) will solve it but basically a js solution (such as masonry.js) would be required.
If you’re using floats, you have to learn how to clear them… it’s the only way to do it with CSS: http://codepen.io/anon/pen/jstGp
Unfortunately, your response, whilst informative, does not actually apply to the OP’s requirements.
Clearing floats here would not solve his problem.
I wasn’t trying to solve the problem just making sure OP understands how to deal with floats in general. Obviously, something like http://desandro.com/masonry/ or http://suprb.com/apps/nested/ would solve the problem
Of course you could use columns, or wrapping a number of floating DIVs in other DIVs, etc. etc. but that would mean you’d have to change your HTML markup and it’s not really flexible.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".