CSS3 Multi column containing divs and sections

Question

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?

A note: Unless you're using only IE10 you have to add the vendor before the css rules, like this: `-webkit-colum-*` See caniuse.com: "[Can I use CSS3 Multiple column layout?](http://caniuse.com/multicolumn)". — insertusernamehere, Nov 30 '12 at 14:26
Nice tip, however, I added in the -webkit- prefix to my css class on the jsfiddle and didn't see any new developments there. It seems to have been ineffective — Ortund, Nov 30 '12 at 20:58

score 0 · Answer 1 · answered Dec 04 '12 at 08:46

section {
    position: relative;
    width: 450px;
    border:1px solid red;
    display:block;
}

dl.2col {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;

    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;

    column-rule: 1px solid #e1e1e1;
}

dl.2col dd {
     -moz-column-width: 200px;
     -webkit-column-width: 200px;
     column-width: 200px; 
     display:inline-block ! important;
    float:none;
}

<section>
<dl class="cats title 2col">
    <dd class="t"><h2><a href="#" class="sh" id="t1">-</a> Title 1</h2></dd>

    <dd class="cat">Category 1<span>This is the first category</span></dd>

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

    <dd class="cat">Category 3<span>This is the third category</span></dd>

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

    <dd class="cat">Category 1<span>This is the first category</span></dd>

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

Hi Carol, I thought I was never going to get any response here. Thanks for your suggestion. I can see where you're going with this, but applying it hasn't worked -> http://jsfiddle.net/LYoung/JLVEs/8/ — Ortund, Dec 04 '12 at 20:47
Yeah, I can't figure out why it isn't working, but if you right click "inspect element" on the columns under the heading "Contact Directory" on this page you will see i managed to crack that nut there: http://www.awri.com.au/contact/ — Carol McKay, Dec 05 '12 at 08:11

Carol McKay · Answer 2 · 2012-12-05T08:43:14.657

section dl.directory {
    margin-left:1em;
    margin-bottom:7px;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
    -moz-column-gap:7px;
    -webkit-column-gap:7px;
    column-gap:7px;
    -moz-column-rule:1px solid #D0D2D3;
    -webkit-column-rule:1px solid #D0D2D3;
    column-rule:1px solid #D0D2D3;
}

section dl.directory dd {
    display:inline-block;
    -moz-column-width:225px;
    -webkit-column-width:225px;
    column-width:225px;
    margin:0 5px;
    padding:5px 0;
    border-bottom:1px solid #D0D2D3;
}

section dl.directory dd em {
    font styling here
}

Max Nad · Accepted Answer · 2012-12-06T03:00:19.447

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;
    }

Yes I see the columns work, thanks! Just one question though, why would `2col` be a bad class name? — Ortund, Dec 08 '12 at 17:16
Class names starting with a number are only understood by Internet Explorer. Source : http://www.w3schools.com/css/css_id_class.asp — Max Nad, Dec 08 '12 at 20:29

CSS3 Multi column containing divs and sections

3 Answers3