How to have two elements with scrollbars next to each other?

Question

I'm currently programming a view, that contains two list elements that can move information between each other. Here's a picture of how it currently looks:

I supposedly have in the page a lot of space to the right of the table "CodigoAGrupador" for the table "Catalogos" to fit in, and it used to do so, but when I added the scrollbars, suddenly, they can only be together vertically, never horizontally.

Here's the CSS code:

#products {
        float: left;
        width: 500px;
    }

    #cart {
        width: 400px;
        right: 0px;
        top: 0px;
        float: right;
        max-height: 600px;
        overflow-y:auto;
        margin: 2px,2px,2px,2px;
        overflow-x: auto;
    }
    #ListaCodigos{
        max-height:600px;
        width:500px;
        overflow-y:auto;
        margin: 2px,2px,2px,2px;
        overflow-x: auto;
    }

And here's the code that I use for the html view (it contains logic that I use to dynamically create the lists, that part shouldn't be the issue)

<div id="content">
    <div id="ListaCodigos">
        <h2 class="ui-widget-header">CodigoAgrupador</h2>
        <div id="products">
            <div id="catalog">
                @foreach (CodigoAgrupadorCuentas_CE c in Model.CodigosAgrupadores)
                {
                    if (unchecked(double.Parse(c.CodigoAgrupador) == (int)double.Parse(c.CodigoAgrupador)))
                    {
                        <h3><a href="#">@c.CodigoAgrupador  -  @c.NombreCuenta</a></h3>
                        <div>
                            <div class="subcatalog">
                                @foreach (CodigoAgrupadorCuentas_CE c2 in Model.CodigosAgrupadores)
                                {
                                    if (double.Parse(c2.CodigoAgrupador) > double.Parse(c.CodigoAgrupador) && double.Parse(c2.CodigoAgrupador) < (double.Parse(c.CodigoAgrupador) + 1))
                                    {
                                        <h4><a href="#">@c2.CodigoAgrupador  -  @c2.NombreCuenta</a></h4>
                                        <div>
                                            <div class="SpecificCatalog">
                                                <ol>
                                                    <li class="placeholder">Add your items here</li>
                                                </ol>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                            <div class="GeneralCatalog">
                                <ol>
                                    <li class="placeholder">Add your items here</li>
                                </ol>
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
    </div>
    <div id="cart">
        <h2 class="ui-widget-header">Catalogos</h2>
        <div class="ui-widget-content">
            @foreach (LedgerChartOfAccounts c in Model.Catalogos)
            {
                if (c.CodigoAgrupador == null)
                {
                    <ul>
                        <li class="draggable">@c.GLAccountNumber  - @c.GLAccountName  </li>
                    </ul>
                }
            }
        </div>
    </div>
    <div>
        <footer>Inserte los catalogos en el grupo que pertenescan, jale.</footer>
    </div>
</div>

It probably is a very simple issue, but I couldn't find any specific answer to my problem and I already have struggled for quite a while. Any help is welcome.

Answer 1

You can just float:left the menu and ListaCodigos to get it to pull up. Make sure that content is wide enough to hold them both on one line however.

However, then after menu div you will want to add a <div style="clear:both"></div>