Get background color to fill full height of div

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?

I would also welcome any tips as to a better way to do my corners without using css3.

HTML

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

CSS

#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;
}

Thanks in advance!

Answer 1

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>

Answer 2

Faux columns (alistapart.com) are the classic way to handle this.

Answer 3

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.

Answer 4

jQuery corners here