How to line up DIVs in the same row

Warning message

JQuery Cycle must be installed in order to run the slideshow. Please go to Status Report for instructions.

In this example you can line up 3 divs in the same line

HTML :

<div class="main-class">
    <div class="sub-class">C1</div>
    <div class="sub-class">C2</div>
    <div class="sub-class">C3</div>
</div>

CSS:

.main-class
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}

.sub-class
{
    display: table-cell;
}