Question

I need to align two divs next to each other, so that each contains a title and a list of items, similar to:

<div>
    <span>source list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

<div>
    <span>destination list</span>
    <select size="10">
        <option />
        <option />
        <option />
    </select>
</div>

It’s remarkably easy to do with tables, but I don’t want to use tables. How can I achieve this?

Answer 1

Float the divs in a parent container, and style it like so:

.aParent div {
    float: left;
    clear: none; 
}

<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>