CSS bubbling while using jQuery Quicksand

Question

I\'m using jQuery Quicksand to create a filterable portfolio of articles:

http://davekiss.com/new/

The problem is, when the filters in the sidebar paragraph are

Answer 1

rewrite your rule as follows:

article.project-container {
    float: left;
    position: relative;
    top: 5px !important;
    left: 5px !important;
    margin: 5px !important;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

the !important declarations are used to override the plugin's rules.

(background is also re-written as specifying a shorthand for a single property is redundant).

Answer 2

From the official github page....

Quicksand uses position: absolute to animate the elements. This means that the container can't use absolute positioning because it breaks Quicksand's calculation of coordinates. After I tried to disable position: absolute in your section.thumbs, Quicksand started to work flawlessly. And since your layout doesn't seem to need this kind of positioning (regular floats will do the job), this will fix the issue.