How to Position Two Divs Side-by-Side Using CSS Floats?

How to Position Two Divs Side by Side in CSS

In CSS, you can place two divs next to each other using float properties.

Floating One Div

To float one div next to the other, add the float: left; property to the desired div. This will make the div move to the left side of the wrapper.

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    float: left; /* Float div to the left */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* Prevent text wrapping below #first */
}

Floating Both Divs

To float both divs next to each other, add the float: left; property to both divs. However, you may need to add overflow: hidden; to the wrapper div to prevent the divs from expanding beyond the wrapper width.

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* Prevent floated divs from extending beyond wrapper */
}
#first {
    width: 300px;
    float: left; /* Float div 1 to the left */
    border: 1px solid red;
}
#second {
    float: left; /* Float div 2 to the left */
    border: 1px solid green;
}

By using these float properties, you can position two divs side by side within a wrapper div. The green div's height will determine the overall height of the wrapper.

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