DaveDev DaveDev - 4 months ago 8
HTML Question

How to Align Two Divs Horizontally

I need to align 2 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>


Can anyone suggest how to solve this problem? It's remarkably easy to do with tables, but I don't want to use tables!

Thanks

Dave

Answer

Float the divs in a parent container.

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

and style it like so:

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