- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
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!
With floats?
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.