Grow your CSS skills. Land your dream job.

Newbie question… Vertical align of floating divs

  • # June 16, 2013 at 3:55 pm

    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:

    http://cdpn.io/Ckmaz

    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!

    # June 16, 2013 at 4:01 pm

    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.

    # June 16, 2013 at 4:55 pm

    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

    # June 16, 2013 at 5:10 pm

    @AlenAbdula

    Unfortunately, your response, whilst informative, does not actually apply to the OP’s requirements.

    Clearing floats here would not solve his problem.

    # June 16, 2013 at 7:36 pm

    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

    # June 16, 2013 at 8:25 pm

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".