hm_468x60_09_395
announcement

Joomla Web Hosting

Find the best and most affordable Joomla web hosting provider.

Community Showcase on joomla.org

The Joomla Project is pleased to announce latest undertaking to promote Joomla site

Advertise on JoomlPanel.com

For only $30.00 a month you can advertise on one of the web's largest Joomla websites.

More Changes Coming Soon!

Check back for future changes!

bh_300x250_08_395

Fixed & Liquid Columns with CSS & jQuery

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 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.

 

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.


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();
});

VIEW DEMO

 

 


Bloggermatre - Bali Web Project
 

joomlahosting




Joomla Tutorials

Joomla panel provides easy to use website joomla tutorial free download joomla templates for joomla verssion 1.0x and 1.5x. Here you will learn how to install Joomla, all the way to installing and customizing your own templates.

Tutorials Showcase enables you to build Web sites and powerful web applications. Best of all, Joomla is an open source solution that is freely available to everyone.

Building Web CMS Project

Submit your joomla web to joomlapanel web showcase gallery directories and find the joomla stable extensions : Joomla plugin, joomla module, joomla component, joomla mambot.

Submit your Article blog into our article directories to anchance high web Traffic.

 

Article and Tips trick

Your sohowcase for Travel guide; Hotel, Villas resort, Flight, car website

tutorial