Grow your CSS skills. Land your dream job.

Positioning a floated element above its preceding element

  • # January 21, 2013 at 7:03 pm

    I’ve been playing around with floated elements and responsive design. What I’m attempting to achieve is three (or more) elements, where the final element is at the bottom of the page in smaller browsers, but floated to the left in larger browsers. What’s happening is that in larger browsers, the element is being floated to the left, but not going any higher than the preceding element, not going to the top of the parent element.

    The reduced test case is [here](http://codepen.io/David_Leitch/full/jfych “http://codepen.io/David_Leitch/full/jfych”). I was wondering if anyone else had encountered this problem before/solved it. I’m guessing that there is a Javascript solution (something like cut/paste the element to beginning of the list of elements in larger browsers), however I was hoping for a CSS only solution.

    # January 21, 2013 at 7:28 pm

    don’t float .left in larger viewports…

    A float can’t (naturally) fall higher than a previous float. You’ve made that even more pronounced by clearing the first float.

    # January 21, 2013 at 7:34 pm

    Thanks @wolfcry911, must have been have writing it before my morning coffee :)

    But I stand by the clear right on the other divs. If I don’t have that there, the divs floated to the right don’t go underneath one another, they lay side by side (I only cleared right for that reason).

    # January 21, 2013 at 8:14 pm

    Correct, I was just stating why the .left div had no chance of going higher as a float.

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

You must be logged in to reply to this topic.

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