Ensures you can keep vertical rhythm in web pages
Latest commit 6c52b3d Jun 22, 2012 @MattWilcox Updated documentation


jQuery Baseline Align

Is a small plugin that ensures given elements within your mark-up adapt their bottom margin to the document baseline. This allows the page to retain vertical rhythm even though certain element’s heights are not a clean multiple of the document baseline.

The plugin also watches for browser resize events, so that fluid layouts are catered for and the plugin is re-run automatically after a rescale.


Call the plugin on any element you want to be automatically adjusted as follows:


You can string together multiple elements as follows:


You may optionally specify a container element to add the margin to. This is useful if you’ve got things like a wrapping anchor or light-box div: you won’t want the margin on the image itself in those cases, so you can specify a container element to put the margin on instead:


The container parameter will accept any selector that is compatible with jQuery’s parents() function.


This is my first jQuery plugin – I would appreciate more experienced authors having a look through and educating me about anything I could have done better.

I do intend to refactor the code when I get time.


You can see the plugin in action on the unfinished plugin homepage: http://baselinealign.mattwilcox.net

Scroll down to the images, watch how the text wraps nicely. Resize your browser. Watch how it continues to wrap nicely. Try the same with your JS disabled :)