Question

I have a div that has fixed height and a background color – as you can imagine the background color does not expand to fill the full height of the div.

I also have 4 divs within this container div for rounded corners. I have included the code below. How do I get the background color to extend to the bottom of the container div regardless of content?

    #art2 {
      margin-top: 15px;
      margin-right: 10px;
      float: right;
      width: 485px;
      background-color: #262626;
    }
    .art2boxtl {
      background-image: url(../images/tlar2.png);
      background-repeat: no-repeat;
      height: 10px;
      width: 9px;
    }
    .art2boxtr {
      position: absolute;
      right: 10px;
      top: 15px;
      background-image: url(../images/trar2.png);
      background-repeat: no-repeat;
      height: 10px;
      width: 9px;
    }
    .art2boxbl {
      position: absolute;
      bottom: 0px;
      background-image: url(../images/blar2.png);
      background-repeat: no-repeat;
      height: 11px;
      width: 10px;
    }
    .art2boxbr {
      position: absolute;
      bottom: 0px;
      right: 10px;
      background-image: url(../images/brar2.png);
      background-repeat: no-repeat;
      height: 11px;
      width: 10px;
    }

<div id="art2">
  <div class="art2boxtl"></div>
  <div class="art2boxtr"></div>
  CONTENT
  <div class="art2boxbl"></div>
  <div class="art2boxbr"></div>
</div>

Answer 1

YOur problem is not the background-color – that will fill the whole area just fine – but the fact that the surrounding DIV is not stretching to the full size of all the DIVs inside it.

Raveren’s approach will stretch the parent div if the childrens are float: right or float: left. It won’t work for the position:absolute ones. For those, you will have to give the parent container a fixed height.