user103219 user103219 - 6 months ago 14
CSS Question

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

div
s 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

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.