CSS3 Multi column containing divs and sections

So I just found out about css3 columns specification and immediately saw that I can use it to "modernize" my forum listing which uses a dynamically generated table.

The code to generate the table is quite complex as it determines itself whether or not to place the next database row's data into a new row in the table or into a new column. Using the css3 columns way, I assume that I can simply let the code read the data into the page and leave css3 to decide what's supposed to go into which column.

I've come across a bit of a problem though. When using it, the content isn't split across the specified number of columns.

Here's some code for reference:

.2col {
    column-count: 2;
    column-width: 400px;
    column-gap: 10px;
    column-rule: 1px solid #e1e1e1;
}


<div class="cats 2col">
    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
        </div>
        
        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>
            
            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>
            
            <div class="cat">
                <p>Category 3<span>This is the third category</p>
            </div>
        </section>
    </div>
    
    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 2</h2>
        </div>
        
        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>
            
            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>
        </section>
    </div>
</div>

I set up this JSFiddle for testing: http://jsfiddle.net/LYoung/JLVEs/1/

Clearly I'm doing something wrong. Can anyone help me identify what that is and why it's wrong?

Solution

I found two problems in your example :

First the -webkit and -moz rules
And the 2col name for your class

I tried in JSFiddle renaming your 2col class for twoCol and adding the -webkit and -moz rules and it seemed to work (Fiddle Example here)

There is still some problems with the style but it splits the content in two columns when the window is large enough

    <div class="cats twoCol">
    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
        </div>

        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>

            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>

            <div class="cat">
                <p>Category 3<span>This is the third category</p>
            </div>
        </section>
    </div>

    <div class="title">
        <div class="t">
            <h2><a href="#" class="sh" id="t1">-</a> Title 2</h2>
        </div>

        <section>
            <div class="cat">
                <p>Category 1<span>This is the first category</p>
            </div>

            <div class="cat">
                <p>Category 2<span>This is the second category</p>
            </div>
        </section>
    </div>
</div>

                body {
        background: #000;
    }
    .title {
        padding-bottom: 10px;
    }
.twoCol {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
    column-width: 400px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    -webkit-column-rule: 1px solid #e1e1e1;
    -moz-column-rule: 1px solid #e1e1e1;
    column-rule: 1px solid #e1e1e1;
}
    h2 {
        font-weight: bold;
        font-size: 20px;
        color: #bede06;
    }
    .t {
        width: 800px;
        column-span: all;
    }
    .t a {
        color: #bede06;
        text-decoration: none;
        font-size: 22px;
    }
    t:after {
        content: '';
        display: table;
    }
    .cat {
        color: #000;
        font-size: 18px;
        border-radius: 5px;
        box-shadow: 0 0 2px #b6bcc6;
        text-shadow: 2px 2px #fff;
        background-image: linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -o-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -moz-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -webkit-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);
        background-image: -ms-linear-gradient(bottom, rgb(225,225,225) 37%, rgb(255,255,255) 69%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.37, rgb(225,225,225)),
            color-stop(0.69, rgb(255,255,255))
    );
    }
    .cat {
        width: 400px;
        height: 50px;
        margin: 0 0 10px 10px;
        padding-left: 5px;
    }
    .cat span {
        display: block;
        font-style: italic;
        font-size: 14px;
    }