Css to make specific html a two column layout

Question

Having the current html:

<div id="divFiltros" class="DivFiltrosInforme">
    <div>
        <div>
            <span>FILTROS SELECCIONADOS</span>
        </div>
        <div>
            <span>Fecha desde:</span><span id="spFiltrosFechaDesde">01/01/2012</span>
        </div>
        <div>
            <span>Fecha hasta:</span><span id="spFiltrosFechaHasta">01/01/2012</span>
        </div>
        <div>
            <span>Clientes:</span><span id="spFiltrosClientes">Clientex</span>
        </div>
        <div>
            <span>Sección:</span><span id="spFiltrosSeccion">Cualquiera</span>
        </div>
    </div>
</div>

And this CSS:

  .DivFiltrosInforme
{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .DivFiltrosInforme > div
    {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        border-style: solid;
        border-width: 2px;
    }

        .DivFiltrosInforme > div > div
        {
            padding-top: 5px;
            padding-bottom: 5px;
        }

            .DivFiltrosInforme > div > div:first-child > span
            {
                font-weight: bold;
                font-size: 14pt;
            }

            .DivFiltrosInforme > div > div > span
            {
                font-weight: bold;
                font-size: 10pt;
                margin-left: 5px;
                margin-right: 5px;
            }

What CSS rules would you add in order to make it a 2 column layout (Excluding the first div which is the tittle). Take into account that the number of divs (the ones that contain two spans) will variate. Preferably i would like only to change the CSS...

Answer 1

Take a look at the CSS3 multicol module .

It has bad IE-support though. All other browsers are already capable .

Answer 2

You mean something like this?

Fiddle

All I've done was added width: 50% and float:left to this rule, but added a :not filter to filter out the title (whilst giving title an id of title of course):

.DivFiltrosInforme > div > div:not(#title)
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 50%;
    float: left;
}

Answer 3

Umm, I think you can use floats on the two divs(two column) and then at the parent div, make the overflow:hidden.

I found your codes very complicated (for me) Lolz

Here's a simple code for a two column layout.

Example layout @ jsFiddle.net <-- Click xD

HTML

<div id="container">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>

CSS

#container {
    border:1px solid red;
    width:100%;
    height:auto;
    overflow:hidden
}

#left {
    background:blue;
    width:50%;
    height:100px;
    float:left;
    color:red;
}

#right {
    background:black;
    width:50%;
    height:100px;
    float:left;
    color:white;
}

​