Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Newbie question… Vertical align of floating divs

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45575

    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!

    #138950
    Paulie_D
    Member

    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.

    #138954
    Alen
    Participant

    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

    #138956
    Paulie_D
    Member

    @AlenAbdula

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

    Clearing floats here would not solve his problem.

    #138963
    Alen
    Participant

    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

    #138964
    Senff
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.