Home  >  Article  >  Web Front-end  >  How to Align Divs Horizontally Within a Container with Fixed Dimensions?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-10 09:57:02124browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn