How Can I Place Two Divs Side by Side Using CSS?

How to Position Two Divs Side by Side in CSS

To achieve side-by-side positioning of two divs within a wrapper, you can utilize CSS techniques such as floating. Here are some effective methods:

Floating One Div

Add the following CSS:

#wrapper {
    overflow: hidden;
}
#first {
    float: left;
}
#second {
    overflow: hidden; /*Prevent wrapping below #first*/
}

Floating #first div to the left will position it adjacent to #second.

Floating Both Divs

Alternatively, you can float both divs:

#wrapper {
    overflow: hidden;
}
#first {
    float: left;
}
#second {
    float: left;
}

However, this method requires specifying overflow: hidden on the wrapper to force it to contain the floated children. Otherwise, the wrapper may appear empty and lack a border around the divs.

The above is the detailed content of How Can I Place Two Divs Side by Side Using CSS?. For more information, please follow other related articles on the PHP Chinese website!