Flexify plugin to align anything

Probably every typewriter, at least once in his life faced with the layout of a two-or three-column layout. Although, the layout itself is easy to lay out, unless of course the columns do not differ in the background color, as for example on a Habré. But with multicolored ones, you will have to torment yourself, because they tend to drag on the contents, and the contents of the neighboring columns, as a rule, are of different heights.

I know two ways to solve this problem:

- enclose both columns in a container, and put in the background a two-color picture;
- set both negative margins and positive padding to the columns at the same time.
')
Both methods have their advantages and disadvantages, but today I want to tell the alignment of columns using a plugin for jQuery - Flexify.

Flexify allows you to create full-page, moving layers in a web application, in other words, you can align the elements you need on the page in height and width, assign vertical or horizontal layout of the child elements of the block, create rows and columns from elements.

Flexify adds the flow () and flex () functions to Jquery; after setting the necessary values, you need to call the function: $ (document) .flexify ().

The flow function takes as its sole argument values: 'vertical' or 'horizontal', these values ​​determine how exactly the children will stretch. For example, the following code will force all elements contained in html and body to split horizontally:

$(function () {
$('html, body').flow('horizontal');
$(document).flexify();
});

The flex function takes two arguments: the stretch value and the coefficient. The stretch value is what we are going to draw, for example: margin- *, padding- *, border- *, width, height, respectively for positioned elements: top, right, bottom, and left. The stretch factor is any integer greater than 0, usually 1.

In order to align the three columns in height, it is enough to write:

$(function () {
$('#content, #sidebar, #sidebar2').flex('height', 1);
$(document).flexify();
});

As you can see, it is quite simple and convenient to use. The plugin can be downloaded from here , and below are examples of its use:

Three columns aligned in height
Centered block with trailing fields and frames
Absolutely positioned block