Im trying to use Isotope(http://isotope.metafizzy.co/) to filter my Wordpress posts, 
http://i44.tinypic.com/fco55k.jpg this is how my site looks like, i would like to filter posts depending on a post category so i need to add a class name to each post and then filter it using isotope

  &lt;li&gt;&lt;a href="#" data-filter="*"&gt;show all&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" data-filter=".design"&gt;design&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" data-filter=".typo"&gt;typography&lt;/a&gt;&lt;/li&gt;


those are the names of my categories, and then i would like to add class name of a post depending on a category he is in.

&lt;div id="main"&gt;
          &lt;?php
          $args = array('orderby' =&gt; 'rand' );
          $random = new WP_Query($args); ?&gt;
          &lt;?php if(have_posts()) : ?&gt;&lt;?php while($random-&gt;have_posts()) : $random-&gt;the_post(); ?&gt;
         &lt;a href="&lt;?php the_permalink() ?&gt;"&gt; &lt;div id="img" class="&lt;?php  $category = get_the_category(); 
                echo $category[0]-&gt;cat_name; ?&gt;"&gt;
            &lt;?php 
                the_post_thumbnail();?&gt;

            &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
&lt;/div&gt;&lt;/a&gt;


and javascript im using

    &lt;script type="text/javascript"&gt;
jQuery(window).load(function(){
jQuery('#main').isotope({
  masonry: {
    columnWidth: 20
  },

});
$('#filters a').click(function(event){
  var selector = $(this).attr('data-filter');
  $('#main').isotope({ filter: selector });
  return false;
});
});

&lt;/script&gt;



Question: CSS Div Footer When Resize The Browser
Answer: The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give 
top:500px

A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.

#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}


If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning. 

You can also do this with some javascript magic.

What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.