Sidebar of category page on bottom of category

Question

My sidebar from the category pages shows up on the bottom of my category. I wasn't like this yesterday, but it doesn't come to the side. Where can i adjust this or where could it be changed cause it cant be showed to my customers like this.

http://www.thefixedgearshop.com/nl/accessoires/zadels that is the category shown below.

<catalog_category_default translate="label">
    <reference name="left">
            <action method="unsetChild"><alias>catalog.leftnav</alias></action>
            <action method="insert"><blockName>catalog.leftnav</blockName><before>athlete_sideblock_banners</before></action>
    </reference>
    <reference name="product_list">
        <block type="cms/block" name="athlete_empty_category" as="athlete_empty_category">
            <action method="setBlockId">
                <block_id>athlete_empty_category</block_id>
            </action>
        </block>
    </reference>
</catalog_category_default>

This is the code that is related towards it: Catalog_category_default

Also i found this one:

<reference name="root">
        <action method="setTemplate">
            <template>page/2columns-left.phtml</template>
            <action method="setIsHandle">
                <applied>1</applied>
            </action>
        </action>
        <action ifconfig="athlete/layout/fluid" method="addBodyClass"><classname>grid-fluid</classname></action>
    </reference>

I edited the options_base_nl.css file and edited the following code:

.col2-layout .sidebar { width: 20.41%;} .col2-layout .col-main { width: 74%;} .col2-left-layout .col-main-wrap { margin-left: 30px;} .col2-right-layout .col-main-wrap { margin-right: 300px;} .col2-layout .col-main { width: 100%;} .col2-layout .sidebar { width: 245px;}

But when i set col2-layout .col-main { width:74% } towards 100% it drops my sidebar on the category page to the bottom again. When i set it towards 74% it makes the sidebar come up, but the product page gets the 26% of the missing width as a sidebar width in the page (see photo below)(the left white part should be like the photo afterwards). It creates a weird looking messy product page. I haven't had this problem before, what can it be?

Answer 1

To change the category page layout:

From the Admin menu, select Catalog > Manage Categories.

In the Categories tree, select the category level you want to change.

On the Custom Design tab, set Page Layout to “2 columns with left bar.”

Click the Save Category button

Answer 2

you need to create a local.xml filed under your themes layout folder.

File : app\design\frontend\\\layout\local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <catalog_category_default>  <!-- for default categories -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
        </reference>
    </catalog_category_default>
    <catalog_category_layered> <!-- for layered categories  -->
        <reference name="root">
            <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
        </reference>
    </catalog_category_layered>
</layout>