How to Align Divs Horizontally Within a Container with Fixed Dimensions?

Floating Divs Horizontally Within a Container with Fixed Dimensions

Question:

I need to align divs horizontally within a container, but I'm facing issues where overflowed elements break down to the next line despite the parent's limited height. Achieving the desired layout through inline elements is not an option.

Solution:

To align divs horizontally and prevent the overflow issue, consider adding an inner div within the container that has a width sufficient to accommodate all floated divs. Here's a code example for this solution:

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div>

The above is the detailed content of How to Align Divs Horizontally Within a Container with Fixed Dimensions?. For more information, please follow other related articles on the PHP Chinese website!