How Can I Horizontally Align Divs in HTML Without Using Tables?

Horizontal Div Alignment Without Tables

In HTML, there are various ways to align elements. While it's straightforward to align divs using tables, some prefer a non-tabular approach. Here's how to achieve horizontal div alignment without relying on tables:

Using CSS Float and Clear

1. Create a parent div: Wrap the two divs you wish to align in a parent div.
2. Float the divs: Add the float: left; property to the child divs. This will make them float to the left side of their parent.
3. Clear the float: To prevent the child divs from stacking vertically, add the clear: none; property to the parent div. This will prevent elements from wrapping around the floating divs.

Example Code

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

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

By following these steps, you can align two divs horizontally and avoid having to resort to tabular layouts in your web pages.

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