Remove excess width on parent when child elements wrap

Question

I have a div container with display: inline-block; with a background color.

Inside this div, I add more rectangle divs side by side with float:left.

When there is not enough space for all the divs on one line, the next one is added under the others, leaving an empty space on the right side of the page. The empty space left over has the color of the background of my container but I want it to be white.

The image on the left is what it currently looks like. The image on the right is what it should look like; the parents background should shrink wrap around its children:

Here is a jsfiddle of the below:

.bigDiv {
  background-color: #aaa;
  display: inline-block;
}
.item {
  height: 50px;
  width: 150px;
  background-color: #000;
  float: left;
  margin: 10px;
}

misterManSam · Accepted Answer

Creating "pseudo-backgrounds"

I have just come up with a somewhat... creative solution:

The parent is not given a background, only padding and overflow: hidden
Each child div is given a ::before pseudo element that will create a "pseudo-background" (z-index: -1 moves it behind the divs background)
The pseudo-background is positioned with top, left and right with negative values that drag them into the divs padding.
The height: 1000% can be any absurd number, as long as it is tall enough to cover every row of divs. The excess is cleanly cut off with overflow: hidden on the parent div

This is what each div looks like, the black border is the edge of the parent which is where the yellow "pseudo-background" is cut off:

it becomes this:

Note: This is a purely visual thought experiment, which may be useful in some cases. The div is still taking up the same width, it just has no background color.

Example

Resize it, see how the "pseudo-background" works at all widths.

.wrapper {
  overflow: hidden;
  padding: 10px 0 0 10px;
  width: 70%;
}
.wrapper > div {
  height: 40px;
  background: #F00;
  margin: 0 10px 10px 0;
  width: 200px;
  float: left;
  position: relative;
}
.wrapper > div::before {
  content: '';
  position: absolute;
  background: rgba(255, 255, 0, 1);
  left: -10px;
  right: -10px;
  top: -10px;
  z-index: -1;
  height: 1000%;
}

Remove excess width on parent when child elements wrap

Answers (2)

Creating "pseudo-backgrounds"

Example

Related Questions