A jQuery plugin for balancing column heights in fluid layouts.
divbalance is a jQuery plugin which will balance the heights of multiple columns in fluid layouts and other html structures.
- Uses jQuery selectors to apply balancing, can accommodate multiple selectors.
- Can specify a minimum height for all coulmns.
- Can add padding or space to the bottom of the coulmn.
How to Use
- Download the latest version of divbalance and jQuery.
- Setup the script in the <head> section of your html:
- Add the class "row" to each row that will require balancing or use an optional row class:
..... <div class="row"> .....
- Add the class "column" to each column that will require balancing or use an optional column class:
..... <div class="row"> <div class="column onecol"> .....
- Add the execution code to the <head> section of your html:
Simple 2 column example
Simple 4 column example with changes to row name, column name, minimum height and bottom spacing
- Why is divbalance needed?
I noticed in some fluid designs that if one column was longer than the other(s) then the bottom of the columns would not line up, (see this example). I also could not find a CSS or jQuery solution that was acceptable.
- What happens when I set minheight to zero?
This means no space will be added to the bottom of the content in each column.
- Can minheight be set to a negative number?
No, if you enter a negative number the content in the column then vertical overflow takes place. If you enter a negative number anyway divbalance will default minheight to zero.
- Do I need to pass all the parameters to divbalance?
No, the example in Step 5 is for instructional purposes only. To use only the default values the execution code would look like this:
- I want to apply divbalance to one container but not another, how do I do this?
You you can use a more specific jQuery selector, as you would with CSS. For the container that you want to apply divbalance to you code your rowclassname parameter as 'rowclassname' : 'div.container1 div.row'.
- I want to apply different minheights to each row, how do I do this?
You can call divbalance multiple times, using different parameters each time. If you give the rows unique class names or IDs, you can write jQuery selectors that will balance only those rows or you can use multiple jQuery selectors to make your selection more specific:
- 'rowclassname' : '.rowone','minheight': 100
- 'rowclassname' : '#mysecondrow','minheight': 100
- 'rowclassname' : 'div#container1 div.row','minheight': 100
- 'rowclassname' : 'div#container2 div.row','minheight': 200
- 'rowclassname' : 'div#container3 div.row','minheight': 300
- What if I have nested rows or columns?
The rowclassname parameter and the columnclassname parameters are both jQuery selectors, with the rows relative to the entire page and the columns relative to their parent row. They can be as specific as you need them to be. For example, you could use "body > .row" to select outer rows but ignore inner rows. You could use "> .column" to select only the outermost columns in a row but ignore inner columns. If you have columns with different class names but want to balance them all together, you could use ".col1, col2, .col3" and so on. If it works as a jQuery selector, and the elements have settable heights, then it should work with divbalance.
- I have a question/problem with divbalance, how do I contact you?
Please feel free to contact us through our contact form.
- I need help with a fluid layout, I want to update, upgrade my website, can you help?
YES! Please feel free to contact us through our contact form.