How do you get three boxes of equal height?

(Pip) #1

I’ve got a three panel layout and want each column to be the same height. At the moment two of them are taller than the other due to word wrapping. I’ve tried fixing the height in pixels, but that isn’t ideal and is hit and miss.

Here’s what it currently looks like.

It would also be awesome if the three ‘More Info’ buttons could all line up at the bottom of the boxes rather than under wherever the text ends.

I’m definitely happy to buy stack to do this as I’m sure I’d get lots of use out of it.

Any suggestions much appreciated!

(Marten Claridge ) #2

One way is to go to StackCentral and type ‘height’ in the search field.

RapidWeaver Central

(Rob Beattie) #3

I’d cheat and write an extra few words for the first panel!

(Pip) #4

Good call @robbeattie That was my solution at first, but when testing its responsiveness it gets messed up depending on the width.

(Pip) #5

I tried that, but they all just see to allow the setting of a max/min pixel dimension. I figured there must be something that resizes all columns responsively based on the maximum height of the tallest one. If I’ve missed something and any of those on StackCentral does that do let me know.

Thanks for the suggestion @Marten_Claridge.

(Marten Claridge ) #6

How about something like this: use a single column stack as the container, place the ‘fixed-height’ stack inside that, with the button stack at the bottom. See screenshot below.


(Andrew Tavernor) #7

Sections will do it, including placing the buttons at the bottom using Sections-Fix stacks, as shown in this example
At the moment though, the equal height function in Sections is only available when it is being used in Foundation. If demand were sufficient it could easily be added to work in other themes as well as per the rest of the Sections features.

(Pip) #8

@tav That example you link to is awesome! That is exactly what I wanted to do, and I suspect lots of other people do too, as that kind of three column layout with buttons at the bottom is very standard.

Problem is I don’t use Foundation at the moment, but once I’ve got this project out of the way I might just take it for a spin and then I’ll be sure to checkout you Sections-Fix too.

(Pip) #9

@Marten_Claridge Thanks for that great screen cap. I’m going to have a play with that and see how it goes. Cheers matey!

(Stuart Henderson) #10

Defligra Bottom Stick stack is ideal for this situation. Its a great stack!

(Pip) #11

Cheers @stuart I’ll check that out.

(Andrew Tavernor) #12

The thing that Sections does differently to most, is that content fixed to the bottom does not merely overlay the content of the column or box.
It intelligently pads the other content so that vertical space is optimised without the need for blank space below the main content. It is also fully responsive friendly because of this. Even if the height of the content changes as a result of width changes, the bottom content never overlays but is always visually correct.

(Andrew Tavernor) #13

btw - it can also do this

(Pip) #14

@tav Wow! That is seriously clever, and what an amazing demonstration of the capabilities. So useful and so very neat. I am definitely, as soon as I get the time, going to have to check out Foundation so that I can get this.

(Andrew Tavernor) #15

Thanks, have a look through the main demo site it can do a lot more. Sections does not require Foundation for most of its functionality, but as ever, with themes that limit the width of the content many of the full width behaviour won’t look so good.

Ed. Link now works - sorry.

(John Splashost) #16

I use SmartColumn Stacks by Marathia stacks -

(Jan Laffan) #17

Hi, first-time RW and stacks user here. Did the Sections stacks ever add the equal height functions to non-foundation themes? I’ve tried playing around with Sections Pro And Sections Box to get the heights of two columns to match up - while still being responsive, but had no luck. Though not sure if I’m just missing something. I don’t have Foundation and can’t afford it right now, though it does look great. Thanks

(Lisa Sandler) #18

Adaptive Grid Stack is free and has it.

(Jan Laffan) #19

Thanks for the super-fast response Lisa. That worked perfectly!

(Lisa Sandler) #20

Glad you got it worked out :slight_smile: @willwood has a bunch of great stacks on that site. Some are free and the others are extremely reasonable in price :slight_smile: