How Can I Horizontally Align Two Divs Without Using Tables?

Horizontal Alignment of Divs

A common layout task is to align two divs horizontally, with each containing its own title and list. While tables can easily achieve this, using tables for layout is often undesirable. To align divs horizontally without resorting to tables, consider the following approach:

Floating Divs in a Parent Container

Float the divs within a parent container. Floating allows divs to be positioned next to each other horizontally. Ensure the parent container is styled as follows:

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

• float: left: Floats the divs leftward within the parent.
• clear: none: Allows the divs to flow next to each other without clearing a line.

Example

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

With this approach, the divs will be aligned horizontally, each containing its title and list, without the need for tables.

The above is the detailed content of How Can I Horizontally Align Two Divs Without Using Tables?. For more information, please follow other related articles on the PHP Chinese website!