slideUp different on actual page

Question

I am trying to use the slideUp() JQuery function on a bunch of items without images. The code I've written works fine in JSFiddle, but on my actual page, it collapses in a clunky way.

Why are they not acting the same way?

JSFiddle

To activate the function on the page, press the checkbox in the right menu

Real page

Answer 1

Sifting through CSS for a few minutes and I found a solution, I have made a list of corrections.

Here is the CSS code on pastebin, it does all the fixes I have mentioned below.

Manual Fix

Find #middlewrapper #content .contentbox, disable float:left.

#middlewrapper #content .contentbox {
    width: 650px;
    padding: 15px;
    /* float: left; */
    background-color: white;
}

Find #middlewrapper #content .contentbox_shadow, disable float:left.

#middlewrapper #content .contentbox_shadow {
    width: 690px;
    height: 20px;
    /* float: left; */
    background-image: url('http://xn--nstvedhandel-6cb.dk/naestved/public/css/../images/content_skygge.png');
    background-repeat: no-repeat;
}

Find #middlewrapper #content, disable float:left.

#middlewrapper #content {
    width: 690px;
    /* float: left; */
}

Finally, find #middlewrapper #content .contentbox, after it's definition, place #content.

#content {
    width: 680px;
    float: left;
}

Do not delete or alter the definition of #middlewrapper #content found a few lines later.