Filling the Remaining Width of a Container with CSS

In a scenario where you have a header with three elements arranged in a row, the goal is to have the middle element occupy the remaining space within the header. To achieve this, the combination of inline-block display and the calc() function in CSS proves effective.

The Code Solution

The provided HTML structure consists of a header containing an image, a middle element with text, and a right element. To manipulate their layout, we apply CSS as follows:

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

Explanation

• Inline-Block: Displaying elements as inline-blocks ensures they stay on the same line and behave like block elements, allowing for width and height adjustments.
• calc() Function: This function performs mathematical operations on CSS values. In this case, we calculate the remaining width by subtracting the fixed width of the left element (100px) from 100%.

The result of this code is that the middle element stretches to fill the remaining space in the header, accommodating its content while the right element maintains its width of 100px.

Alternative Solution

If you prefer to have a space between the divs, you can modify the CSS by setting the font-size of the outer element (header) to 0:

header {
  font-size: 0;
  ...
}