Tutorials

Smart Columns w/ CSS & jQuery

Tags: Intermediate

As I observe other liquid based websites, I see two commonly used techniques on displaying columns, the fixed columns and the liquid columns. There are drawbacks to both that I would like to point out, and later would like to pitch my solution.

Fixed Columns
The great thing about having fixed columns in a liquid layout, is that it will fill up the view port with as many columns as it can fit. But as you can see there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in.

Liquid Columns
Liquid columns do not leave any excess white space and fits perfectly within its layout, only downside of this is that we are restricted to having a fixed number of columns per row.

Smart Columns with CSS & jQuery

One solution that would be able to benefit the situations is to take the good of both scenarios and mash it into one.

1. Allow as many fixed columns to line up across the viewport (as many as it will fit based on the base column size)
2. 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.
3. Keep 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.

HTML

Start by creating an unordered list that would behave as columns.

<ul class="column">
        <!--Repeating list item-->
        <li>
            <div class="block">
             <!--Content-->
            </div>
        </li>
       <!--end repeating list item-->
</ul>

CSS

ul.column{
	width: 100%;
	padding: 0;
	margin: 10px 0;
	list-style: none;
}
ul.column li {
	float: left;
	width: 200px; /*Set default width*/
	padding: 0;
	margin: 5px 0;
	display: inline;
}
.block {
	height: 355px;
	font-size: 1em;
	margin-right: 10px; /*Creates the 10px gap between each column*/
	padding: 20px;
	background: #e3e1d5;
}
.block h2 {
	font-size: 1.8em;
}
.block img {
        /*Flexible image size with border*/
	width: 89%;  /*Took 1% off of the width to prevent IE6 bug*/
	padding: 5%;
	background:#fff;
	margin: 0 auto;
	display: block;
	-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}

jQuery

function smartColumns() { //Create a function that calculates the smart columns

        //Reset column size to a 100% once view port has been adjusted
	$("ul.column").css({ 'width' : "100%"});

	var colWrap = $("ul.column").width(); //Get the width of row
	var colNum = Math.floor(colWrap / 200); //Find how many columns of 200px can fit per row / then round it down to a whole number
	var colFixed = Math.floor(colWrap / colNum); //Get the width of the row and divide it by the number of columns it can fit / then round it down to a whole number. This value will be the exact width of the re-adjusted column

	$("ul.column").css({ 'width' : colWrap}); //Set exact width of row in pixels instead of using % - Prevents cross-browser bugs that appear in certain view port resolutions.
	$("ul.column li").css({ 'width' : colFixed}); //Set exact width of the re-adjusted column	

}	

smartColumns();//Execute the function when page loads

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
	smartColumns();
});

Conclusion

I am planning on using this technique in the future, if anyone has any other ideas or techniques they use, please don’t hesitate to share it. If you have any questions, comments, or suggestion please let me know!