How to Horizontally Align Divs Without Using Tables?

Horizontal Div Alignment

To align two divs horizontally without using tables, float them in a parent container. Here's a detailed breakdown of how to achieve this:

1. Float the Divs:

   • Add the following CSS property to the divs:

     float: left;

2. Clear Floats:

   • To prevent the divs from collapsing unwanted elements in the parent, add the following property to a parent element:

     clear: none;

3. Example HTML and CSS:

   • Here's an example of how your HTML and CSS could look:

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

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

This method is a clean and straightforward way to align divs horizontally without using tables.

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