WebAppers

/ best free open source web resources /

Graphic Resources

Autoresizing Smart Columns with jQuery

Posted · Category: Information, License Free

Currently, there are two commonly used techniques on displaying columns, the fixed columns and the liquid columns. With fixed columns, there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in. The downside of liquid columns is that we are restricted to having a fixed number of columns per row.

SohTanaka has thought of a solution: Smart Columns with CSS & jQuery would be able to benefit the situations is to take the good of both scenarios and mash it into one. Allow as many fixed columns to line up across the viewport. Take excess white space and evenly distribute them to each of the columns to complete the full row. This way the columns will always fit perfectly.

And also, It keeps a default fixed width as the base, so that the columns are reasonably within the intended columns sizes while maintaining enough flexibility to accommodate for the expandable viewport.

Smart Columns

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/smart-columns/
License: License Free

3 Comments
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons