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

How to Position Two Divs Side by Side Using CSS

In CSS, achieving the desired vertical alignment and proximity of div elements can be accomplished through various techniques. One effective approach is utilizing floating.

Using Float

Floating one or both of the inner divs side by side will allow them to align horizontally without affecting the layout of adjacent content.

Floating One Div

Adding the float: left; property to #first in the CSS below will float it to the left, causing it to occupy the left side of the #wrapper div while the #second div remains on the right.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  overflow: hidden;
}

Floating Both Divs

Floating both #first and #second will also result in a side-by-side arrangement. However, it's essential to prevent the #wrapper div from shrinking around its floated children. To achieve this, add overflow: hidden; to #wrapper, ensuring that it contains both floating elements.

#wrapper {
  width: 500px;
  border: 1px solid black;
  overflow: hidden;
}
#first {
  width: 300px;
  float: left;
  border: 1px solid red;
}
#second {
  border: 1px solid green;
  float: left;
}

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