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. 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.
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).
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. 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.
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.
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).
Correct, I was just stating why the .left div had no chance of going higher as a float.