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

How to Position Two Divs Side-by-Side

To place two div elements side-by-side, you can use the float property in CSS.

Within the parent div (#wrapper), set its width and add a border for visual clarity.

#wrapper {
  width: 500px;
  border: 1px solid black;
}

For the first div (#first), give it a fixed width and apply a border:

#first {
  width: 300px;
  border: 1px solid red;
}

To float the first div left, add the following:

#first {
  ...
  float: left;
}

Leave the second div (#second) without specifying a width, but give it a border:

#second {
  border: 1px solid green;
}

To ensure the second div respects the height of the first div, add an overflow property to the wrapper div:

#wrapper {
  ...
  overflow: hidden;
}

Alternatively, you can float both the first and second divs, but remember to set the overflow property on the wrapper div to contain the floated children:

#wrapper {
  ...
  overflow: hidden;
}

#first {
  ...
  float: left;
}

#second {
  ...
  float: left;
}

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!