Rapidweaver Stacks Developers
www.doobox.co.uk

Stacks Image 359
The Pro Columns Stack Equal height columns Creating equal height columns with CSS is not as easy as it may first seem. These stacks use 100% CSS hack-free, image-free and JavaScript-free code, so it can even be used on the most strictly coded websites.
Stacks V2 Only
Enter the name for this tabbed section: Live Demo

Frame your content equally.


With equal height Pro columns stacks, you can..!


You will see the Pro Columns stacks used widely throughout the Doobox website. In our "Options and Settings" sections for example.
Pro Columns, frames your content, providing the eye with a far more appealing layout. You can even set the background of the columns as transparent, or fill them with your chosen colour.
See all the options and settings, above.

New..!

Border Styles.
Choose between...
1: Solid Borders
2: Dashed Borders
3: Dotted Borders

No matter how much content you place in either column, the other will always expand to the same height.

Add your content in exactly the same way as you would for a regular built in columns stack.
Just drag and drop into either column.

Column Splits

Each of the columns can be split to your liking, with a percentage slider built into the settings of the stack.
An example of this below.
Un- Even Split
Notice the column split has been demo'd here as an uneven split. This is done with a simple slider in the settings of the stack.
And you can nest further Pro Columns stacks within the parent, to create multiple layout types.
Enter the name for this tabbed section: More Demos

Create Complex Nested Layouts
There are three pro columns stacks below. Can you tell how they have been placed..?

Border control

With border control you can create almost any layout, that remains flexible and alway with equal heights where needed.
Heights will always remain equal.
This cell is the left column of the column you see to the right, containing the image.
The 2 columns above have been nested inside me.
I am a text stack nested below.
Stacks Image 6095
I am a text stack nested in another pro columns stack, placed directly below, and i have my top margin removed in my settings.
You can really get creative with layouts using the pro columns stack.

Background Images
Easily add a background image to your equal height columns.

Background images
Use the built in default background image setting to have an image displayed in your columns.

Column Splits
Easy slider in the settings, to split the columns, left and right, by percentage.

60%

40%

Transparent Backgrounds
Just don't select a background fill in the settings, and the stack will remain transparent.

Sometimes you want to see through to your background

You can also select the border colour

One of the settings in pro columns is "border colour". We know your not always going to want dark grey.

Build Table Style Layouts
Easy and quick to deploy table layouts that will remain symmetrical what ever you add.

Table style design
Colour the columns by using the default background setting
Table style design
Your content :
Can be as long as you like, and it will always expand its partner to suit.

Your content :
Can be as long as you like, and it will always expand its partner to suit.
Table style design
Simply remove the top border in the settings, for each extra row.
Table style design
Simply remove the top border in the settings, for each extra row.

For more details, please see the overview & settings sections above

Enter the name for this tabbed section: Quick Start Guide

Quick Start
Get up and running fast

Step 1:

After dragging in a stack to the page.
You will see 2 drop zones by default. One for each columns content.

At this point you can set your column split, Border colour, and column padding from the settings.

You can set the background colour of the column's, using the default background setting.
Note : If you select to use a background colour, It is best to leave the default padding at 0, and use the padding slider contained in the stacks own settings.
Stacks Image 555

Step 2:

Drop in your content to each of the columns, and they will automatically be made equal heights.
The height is dictated by column with the longest content.

Thats it…!
Stacks Image 5901

Advanced:

Now you can experiment with more complex layouts, table building etc. By dragging in more pro columns stacks, positioning them and removing some of the borders from the stacks settings.

There really is no right or wrong way to use the custom settings in the stack. The best way to learn what the stack can do for you other than the basic but powerful function outlined above, is… Experiment..!
Stacks Image 5912

Top Tip…! If your ever stuck over what a control in the settings pane does. Hover over it, to reveal an explanation.

Enter the name for this tabbed section: Options & Settings
Stacks Image 6006
Stacks Image 5996
Column Split
Sets the width of each column by means of a percentage split.
Column Padding
Sets the padding in each of the columns simultaneously.
Column Borders (color)
Sets the colour of all the borders around the stack.
Border Display (section)
Select these options to show or hide each of the borders in the stack.
This option is designed to create more complex layouts by building up multiple instances of the stack.
Border Style
Added in V2.0.2. Options include "Solid", "Dashed", "Dotted".

Top Tip…! If your ever stuck over what a control in the settings pane does. Hover over it, to reveal an explanation.

Enter the name for this tabbed section: Video

This video was kindly brought to you by :

Stacks Image 4222
Created exclusively for the stacks 2 plugin
Harnesses the power of the new stacks 2 plugin. And takes advantage of many of the new API features.
Equal height columns
No matter what you add to either column. It's partner will alway stretch to the same height.
Build exceptional table style layouts
If you use the stack for table layouts. You can be sure each pair of cells will remain equal heights.
Pure CSS
As the columns stacks use pure css and no javascript, you wont find any conflicts with other scripts on your page.
theaddspot