Forums

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

Home Forums CSS Positioning a floated element above its preceding element

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #42157
    David_Leitch
    Participant

    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/jfychhttp://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.

    #121804
    wolfcry911
    Participant

    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.

    #121805
    David_Leitch
    Participant

    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).

    #121812
    wolfcry911
    Participant

    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.