3 Columns or 3 Columns (Stacks 2)

(Bruce Kieffer) #1

Both of these appear in my Stacks Library. I have show hidden Stacks checked, so there are then 2 Layout sections visible in the library. What is the difference between these stacks?

(Isaiah Carew) #2

The stacks that are normally hidden (and labeled with Stacks 2) are included in Stacks for compatibility with documents created with Stacks 2.

The new column stacks are responsive, have different semantics (the HTML is ordered differently in some cases) – so we included the older versions (but hidden) so that existing documents created with those older versions would continue to work exactly the same.

This lets people incorporate the new functionality gradually.

For any new designs, I’d strongly encourage you to use the Stacks 3 versions and just leave the hidden things hidden.


(Bruce Kieffer) #3

OK, then I need some help understanding. If I set up a 3 Columns (Stacks 2) stack the same as a 3 Columns stack then why does the latter shift the center column all the way left? I want the columns to be equal even if there’s nothing in the right and left columns.

(Bruce Kieffer) #4

I need some help with this please.

(Robert Ziebol 🖖🏼) #5

Are you using the two different column stacks for a reason or just for testing? My guess is the old one is affecting the new one. What happens if you put two new 3 column stacks like that??

(Andrew Tavernor) #6

Responsive columns of all varieties do this, they collapse horizontally when they have no height. The simple hack is to give them a min-height of 1px

…but is is much better practice really to use a single column, with a max-width set and have it centered (usually with a margin: 0 auto).

(Isaiah Carew) #7

If you use a 3 column stack to build a 1 column layout things might get a bit strange.

Or put another way: If you use your tools in ways they were not intended to be used, the don’t work as well.

Or using the old joke:

Patient: "It hurts when I put my arm behind my back."
Doctor: “Don’t put your arm behind your back. Next patient please!!!”


OK, being serious: If you want to design a narrow column of text, just adjust the width of the column in the Layout settings.

If you want to use a 3-column stack, then you should fill in all three columns.

(Andrew Tavernor) #8

@isaiah I tried to say that but more subtly :slight_smile:

(Isaiah Carew) #9


From a product standpoint: I know that the older stacks did not have this quirk. The obvious solution (as you mentioned) is to include a dummy stack that has a minimum height so that the float behaves correctly. Of course automatically introducing dummy content to empty drop-zones comes with other quirks and downsides that are far worse. I actually considered adding specific API to choose when you wanted dummy content.

But all of those changes come with side effect quirks that seem worse than the quirk I’m trying to eliminate. :-/

(Bruce Kieffer) #10

@tav, Your suggestion of the fixed width single column is a good solution for me. Thanks to all who offered help.