I’m trying to build a three column layout where the (visually) middle element is actually first in the source order. This way, when it breaks down into one column, the element that used to be in the middle will now be at the top.
I’m not sure if this is impossible without delving into flexbox, or if I’m just not googling with the right terms. Can any of you experts chime in?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
See if this gets you started: untitled
Walter
On Mar 23, 2015, at 6:34 PM, Caleb Grove email@hidden wrote:
I’m trying to build a three column layout where the (visually) middle element is actually first in the source order. This way, when it breaks down into one column, the element that used to be in the middle will now be at the top.
I’m not sure if this is impossible without delving into flexbox, or if I’m just not googling with the right terms. Can any of you experts chime in?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walter, you’re a star! I’m not sure why absolute positioning never crossed my mind, I guess I’m too accustomed to working inflow/relative. 
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I follow this with great interest, but I don’t see the three columns
collapse and stacked into one, on mobile there’s still three columns. When
resizing desktopscreen left and middle column get messed up with each other.
Am I suspecting something what isn’t meant?
2015-03-24 1:05 GMT+01:00 Caleb Grove email@hidden:
Thanks Walter, you’re a star! I’m not sure why absolute positioning never
crossed my mind, I guess I’m too accustomed to working inflow/relative.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This example does not have any breakpoints defined, but it could, because the columns are in the desired order in the source code.
Walter
On Mar 24, 2015, at 4:54 AM, email@hidden wrote:
I follow this with great interest, but I don’t see the three columns
collapse and stacked into one, on mobile there’s still three columns. When
resizing desktopscreen left and middle column get messed up with each other.Am I suspecting something what isn’t meant?
2015-03-24 1:05 GMT+01:00 Caleb Grove email@hidden:
Thanks Walter, you’re a star! I’m not sure why absolute positioning never
crossed my mind, I guess I’m too accustomed to working inflow/relative.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Similar example, with breakpoints.
http://cssway.thebigerns.com/workbench/column-switcheroo/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yep, thats what I expected to see. Thnx Ernie.
2015-03-24 12:33 GMT+01:00 The Big Erns email@hidden:
Similar example, with breakpoints.
http://cssway.thebigerns.com/workbench/column-switcheroo/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hm - to me this all feels pretty strange. It would be nice, if Walter could post his (FW) example as well (if possible). I’m interested in “absolute positioned” in his case.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hm - to me this all feels pretty strange. It would be nice, if Walter could post his (FW) example as well (if possible). I’m interested in “absolute positioned” in his case.
I’m pretty sure Walter’s example was handwritten… but I’ve been learning about the position property and its different values for a little while now, and it’s been fun.
There was a discussion a while back which touched on “document flow” or “flow order” – so looking into that then led to how inflow items behave toward one another. Like letters in a sentence, document flow determines how they all line up, in what order, etc. Floating items removes them from the normal document flow, and positioning them with absolute or fixed values does too. From this exercise I’d say that floated and absolutely positioned items also do not occupy the same non-normal document flow.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Well - the point I’m referring to is sorting order in Freeway:
https://dl.dropboxusercontent.com/u/8231701/screeners/crazycolumns.jpg
This is what currently feels a bit strange to me.
I’m honest:
I might failed the challenge here, but my answer would be:
Not to be done with a three col layout, but to be done by a left/right basic construction. In the left one, I’d put col2 (float right) and then col1 (float left). In the right parent the 3rd col.
Like this:
https://dl.dropboxusercontent.com/u/8231701/screeners/crazycol2.jpg
and would look like:
http://backstage.kimmich-digitalmedia.com/testings/crazygrid/crazycolumns.html
But I’m so unsure having failed the theme here.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Huh, looks like I sparked a lot of inspiration here!
FWIW, here’s a Freeway document that follows Walter’s method: http://cl.ly/aLrY. The trick is to set the left and right column to absolute positioning in Freeway’s construction view, so that they can be later than the middle column (which is inflow) in the source code. Then, when they need to break to one column, I set their position to static via the extended dialog (see the 480px breakpoint).
From a quick glance, Ernie’s method is just the inverse – the columns are set up as inflow elements in Freeway, then via the extended dialog in the default breakpoint he is changing the left and right columns to position: absolute; and aligning them to the left and right. Same basic idea.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
When using the 2 box wrapper in Backdraft, the right hand side appears on top of the left. How do I get the left to appear on top? I tried the absolute position on Ern’s example, but the 2 boxes just merged together!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Huh, looks like I sparked a lot of inspiration here!
I’ve changed my example to use position:static on the narrower breakpoint to remove the absolute positioning. It’s a better solution, I agree.
http://cssway.thebigerns.com/workbench/column-switcheroo/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Noel,
Your problem is actually (mostly) unrelated to this thread. If the right column it moving above the left, then it means that you accidentally did a little drag on one of the columns and Freeway thought you wanted to resort them. Freeway is incredibly sensitive to that and so this is one of the most common problems I hear about.
To fix it, select the right column, copy it to your clipboard, and delete it from the page. Then, select the left column and press the → arrow key on your keyboard once. Now hit ⌘V to paste the right column back in.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Caleb, absolute genius! Worked a treat, many thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options