7

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>
Laurel
  • 5,965
  • 14
  • 31
  • 57
user103219
  • 3,209
  • 11
  • 39
  • 50

3 Answers3

4

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
2

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>

raveren
  • 17,799
  • 12
  • 70
  • 83
  • Won't work in this case, his containing elements are `position: absolute`. It would be the right approach if the elements where `float: left` or `right` – Pekka Jan 25 '10 at 17:56
1

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

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

Community
  • 1
  • 1
Subashini Ganesan
  • 11
  • 3