CSS is slowing down the page rendering

Question

We have a page where use can browse 2000 profiles max, we add 20 profiles as user scroll to bottom of page. After 500 elements the adding of profiles get slower and after 1000 its very difficult to scroll down.

We first thought that it was result of too many DOM objects but after debugging it turns out that CSS was the actual problem, if we remove the CSS from page scrolling become very smooth till the 2000 profiles. Can any one tell me why CSS is doing this? and how we can improve it to show 2000 profiles.

Our profile contains one image only and no text.

CSS is as below.

.profileCard {
  width: 25rem;
  height: 10rem;
  float: left;
}
.profileCard .imageHolder {
  width: 9.9rem;
  height: 9.9rem;
  float: left;
}
.profileCard .imageHolderSecondary {
  height: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.profileCard .imageHolderSecondaryTwo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.imageCard .profileCard {
   width: 18.75rem;
   height: 18.75rem;
   background-color: white;
}
.imageCard .profileCard .imageHolder {
   width: 100%;
   height: 100%;
 }
.imageCard .profileCard .imageHolder .profileImage {
   min-width: 18.75rem;
   min-height: 18.75rem;
 }

HTML:

<div class="profileCard">
  <div class="imageHolder">
    <div class="imageHolderSecondary">
      <div class="imageHolderSecondaryTwo"> 
        <div class="profileImageContainer"> 
          <img id="imageUrl" class="profileImage" src="http://graph.facebook.com/xyz/picture?type=large" title="undefined"></img> 
        </div> 
       </div> 
      </div>
    </div>
  </div>
</div>

Answer 1

What kind of layout are you aiming for because the floating seems excessive especially with no sign of clearing. The browser will likely be having a nightmare dealing with all those float positioning calculations.

EDIT: Not quite the same situation but it seems someone else has had a similar webkit related problem. I've no idea what QT is but it seems like a very similar stuttery scroll bar problem. https://bugreports.qt-project.org/browse/QTWEBKIT-122