The columns are dropping the way they are as much because of the source order of your code as the float properties. I think the only way you'll be able to get the LEFT columns to drop instead of the RIGHT columns would be to reverse your source order AND use float fight.
i.e. As I understand it you have: Example A - (psuedo) source code would look like... - Column 1 float left - Column 2 float left - Column 3 float left - Column 4 float left Assuming equal width columns, this means initially the viewer sees [1][2][3][4] and as the window narrows, 4 drops first, then 3, then 2 as below: [1][2][3] [4] then [1][2] [3][4] then [1] [2] [3] [4] To reverse that dropping order, the easiest solution would be to do the following: Example B - (psuedo) source code would look like... - Column 4 float right - Column 3 float right - Column 2 float right - Column 1 float right You'll be able to preserve your original presentation of [1][2][3][4]and as the window narrows, 1 should drop first, then 2, then 3. [1][2][3][4] then [2][3][4] ......[1] then [3][4] [1][2] etc. Where as, if you only use float:right you would get: [4][3][2][1] then .[3][2][1] .......[4] then ..[2][1] ..[3][4] etc... Are you avoiding float:right to preserve the initial order of the content OR to avoid having all of the content shift to the right side of the page? If you are merely trying to preserve that initial content order and the drop order, I think Example B will work for you (it's possible to address the content shift in other ways). Unfortunately, with example b the order of the source code will not match the display order for screen readers and the like which is something you should be aware of. I now it's not a necessarily a solution, but hopefully, it clarifies the question enough to spark a thought for you (or for others) Best of luck, Daniel -----Original Message----- From: [email protected] [mailto:[email protected]] On Behalf Of Micky Hulse Sent: Friday, May 11, 2012 12:08 PM To: css-d Subject: [css-d] Float drop... Can float:left drop left? Hello, I have a container that adapts at certain break points as the browser window gets smaller. Within this container, I have 4 floated:left columns; at the container's widest width, all four columns line up side-by-side. As the container gets smaller, the far RIGHT columns drop below the preceding columns. Is there any way to make the far LEFT columns drop to the second line whilst retaining my float:left behavior? In other words, I want to keep float:left on the columns and force the left-most columns drop below the right-most columns. I don't want to use float:right. Hopefully that's clear. Let me know if I need to clarify further. I assume that's there's no pure CSS way to do this, but I figure it does not hurt to ask. :) Thanks! M ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
