How Can I Set a Parent Container's Height with Absolutely Positioned Children?

Parent Height and Absolute Positioning

As we work with containers and their absolutely positioned or relatively positioned children, we may encounter challenges in determining the container's height while ensuring that the children remain within it.

Problem

Consider the following HTML and CSS code:

<section>

article {
  position: relative;
}

.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}

.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

The objective is to ensure that the "bar" text appears between the four squares, not behind them. However, due to the absolute positioning of the squares, the container's height cannot be set based on the dimensions of its children.

Solutions

2022 Update:

Modern CSS layout technologies like Flex or Grid provide more elegant solutions. It is recommended to explore these options for better support and flexibility.

Original Answer:

With pure CSS, it is not possible to set the parent's height while maintaining absolute positioning for its children.

Alternative Approaches:

• JavaScript: Calculate the height of the absolutely positioned children after rendering and use it to set the parent's height.
• Float and Margins: Position the children using float and margins while keeping them in the document flow. Utilize overflow: hidden (or a clearfix technique) on the parent to expand its height based on its children's dimensions.

The above is the detailed content of How Can I Set a Parent Container's Height with Absolutely Positioned Children?. For more information, please follow other related articles on the PHP Chinese website!