# How do you get three boxes of equal height?

**URL:** <https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523>\
**Category:** RapidWeaver Classic\
**Created:** [October 25, 2015, 2:10pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523 "2015-10-25T14:10:43Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 2:10pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/1 "2015-10-25T14:10:43Z")

</div>

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.

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/1/1e6a8ab8a974435b850b8daef167f2c62a068ca6.png)

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!

---

<div class="post-metadata">

**Author:** ![anon75570550](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@anon75570550](https://forums.realmacsoftware.com/u/anon75570550)\
**Post date:** [October 25, 2015, 3:09pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/2 "2015-10-25T15:09:18Z")

</div>

One way is to go to [StackCentral](https://rapidweavercentral.info/stackcentral/) and type ‘height’ in the search field.

Marten  
[RapidWeaver Central](https://rapidweavercentral.info)

---

<div class="post-metadata">

**Author:** ![robbeattie](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/robbeattie/32/78_2.png) [@robbeattie](https://forums.realmacsoftware.com/u/robbeattie)\
**Post date:** [October 25, 2015, 3:59pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/3 "2015-10-25T15:59:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 4:10pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/4 "2015-10-25T16:10:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 4:15pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/5 "2015-10-25T16:15:50Z")

</div>

> [@anon75570550](#):
>
> StackCentral

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 @anon75570550.

---

<div class="post-metadata">

**Author:** ![anon75570550](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@anon75570550](https://forums.realmacsoftware.com/u/anon75570550)\
**Post date:** [October 25, 2015, 4:36pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/6 "2015-10-25T16:36:35Z")

</div>

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.

Marten

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/f/f027019d4194263142d5c6a9bdd0cf644e985498.png)

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [October 25, 2015, 4:54pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/7 "2015-10-25T16:54:38Z")

</div>

Sections will do it, including placing the buttons at the bottom using Sections-Fix stacks, [as shown in this example](http://demo.bigwhiteduck.com/sections/eq-height/)  
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.

---

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 5:00pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/8 "2015-10-25T17:00:38Z")

</div>

> [@tav](#):
>
> as shown in this example

@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.

---

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 5:02pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/9 "2015-10-25T17:02:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stuart](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/stuart/32/1118_2.png) [@stuart](https://forums.realmacsoftware.com/u/stuart)\
**Post date:** [October 25, 2015, 5:49pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/10 "2015-10-25T17:49:10Z")

</div>

Defligra Bottom Stick stack is ideal for this situation. Its a great stack!  
[http://www.defligra.com/layout-stacks/bottomstick-stack/](http://www.defligra.com/layout-stacks/bottomstick-stack/)

---

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 5:54pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/11 "2015-10-25T17:54:00Z")

</div>

Cheers @stuart I’ll check that out.

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [October 25, 2015, 8:04pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/12 "2015-10-25T20:04:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [October 25, 2015, 8:07pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/13 "2015-10-25T20:07:40Z")

</div>

btw - it can also do [this](http://demo.bigwhiteduck.com/sections-flex/)

---

<div class="post-metadata">

**Author:** ![Pip](https://avatars.discourse-cdn.com/v4/letter/p/9f8e36/32.png) [@Pip](https://forums.realmacsoftware.com/u/Pip)\
**Post date:** [October 25, 2015, 8:11pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/14 "2015-10-25T20:11:22Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![tav](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/tav/32/5458_2.png) [@tav](https://forums.realmacsoftware.com/u/tav)\
**Post date:** [October 25, 2015, 8:14pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/15 "2015-10-25T20:14:40Z")

</div>

Thanks, have a look through the main [demo site](http://demo.bigwhiteduck.com/sections) 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.

---

<div class="post-metadata">

**Author:** ![john\_splashost](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/john_splashost/32/409_2.png) [@john\_splashost](https://forums.realmacsoftware.com/u/john_splashost)\
**Post date:** [October 30, 2015, 4:01pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/16 "2015-10-30T16:01:35Z")

</div>

I use SmartColumn Stacks by Marathia stacks - [http://rapidweaver.marathia.com/stacks/SmartColumns/](http://rapidweaver.marathia.com/stacks/SmartColumns/)

---

<div class="post-metadata">

**Author:** ![janl](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@janl](https://forums.realmacsoftware.com/u/janl)\
**Post date:** [February 13, 2017, 11:49pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/17 "2017-02-13T23:49:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![LSPhoto](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/lsphoto/32/270_2.png) [@LSPhoto](https://forums.realmacsoftware.com/u/LSPhoto)\
**Post date:** [February 13, 2017, 11:56pm UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/18 "2017-02-13T23:56:47Z")

</div>

Adaptive Grid Stack is free and has it. [https://stacks4stacks.com/adaptivegrid/](https://stacks4stacks.com/adaptivegrid/)

---

<div class="post-metadata">

**Author:** ![janl](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@janl](https://forums.realmacsoftware.com/u/janl)\
**Post date:** [February 14, 2017, 12:16am UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/19 "2017-02-14T00:16:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![LSPhoto](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/lsphoto/32/270_2.png) [@LSPhoto](https://forums.realmacsoftware.com/u/LSPhoto)\
**Post date:** [February 14, 2017, 12:19am UTC](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523/20 "2017-02-14T00:19:12Z")

</div>

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

[Next page](https://forums.realmacsoftware.com/t/how-do-you-get-three-boxes-of-equal-height/3523.md?page=2)
