How to Maintain Container Height with `display: inline-block` and `position: absolute` in CSS?

CSS: display:inline-block and positioning:absolute

This question explores the behavior of CSS elements when using both display:inline-block and positioning:absolute. The following HTML code is provided:

<code class="html"><div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div></code>

With the following CSS:

<code class="css">.section {
  display: block;
  width: 200px;
  border: 1px dashed blue;
  margin-bottom: 10px;
}
.element-left,
.element-right-a,
.element-right-b {
  display: inline-block;
  background-color: #ccc;
  vertical-align: top;
}
.element-right-a,
.element-right-b {
  max-width: 100px;
}
.element-right-b {
  position: absolute;
  left: 100px;
}</code>

The issue raised is that the element with absolute positioning makes its containing box lose its height. The question seeks a solution to this problem while keeping absolute positioning within the .section box.

Understanding the Issue

When using position:absolute;, the element's position is removed from the normal page flow. As such, it no longer affects the layout of its containing element, including its height. Hence, the container element, in this case the .section box, loses track of its height and takes on a zero height unless otherwise specified.

Additionally, display:inline-block; is not applicable to absolutely positioned elements because absolute positioning overrides this display mode, effectively setting it to display:block.

Solving the Height Issue

To solve the height problem, one must explicitly set the height of the .section box. However, considering the desired layout, using absolute positioning may not be the most suitable approach.

Alternative Solution

The desired layout, with the second column aligned to a fixed position within each block, can be achieved without using absolute positioning. Here's an alternative solution:

<code class="html"><div class="section">
  <span class="element-left"><span class="indent-0">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-1">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-2">some text</span></span>
  <span class="element-right">some text</span>
</div></code>

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.indent-1 {
  padding: 10px;
}
.indent-2 {
  padding: 20px;
}
.element-right {
  width: 150px;
}</code>

By adding extra markup to represent the indentation level and using relative positioning techniques with padding, we can easily achieve the desired layout.

The above is the detailed content of How to Maintain Container Height with `display: inline-block` and `position: absolute` in CSS?. For more information, please follow other related articles on the PHP Chinese website!