Get background color to fill full height of div

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="ar开发者_JS百科t2">
  <div class="art2boxtl"></div>
  <div class="art2boxtr"></div>
  CONTENT
  <div class="art2boxbl"></div>
  <div class="art2boxbr"></div>
</div>

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.

Try something among the lines of:

          <div id="art2">
              <div class="art2boxtl"></div>
              <div class="art2boxtr"></div>
              CONTENT
              <div class="art2boxbl"></div>
              <div class="art2boxbr"></div>
              <div style="clear:both"></div>
          </div>

note the <div style="clear:both"></div>

Use position:absolute for you parent div. This solved the problem for me.

You can also refer https://stackoverflow.com/a/18968401/6751430