trouble with imageless rounded corners

Question

Hi there,

Can someone explain to me why the bottom corners are not expanding with the div blockdark (height: 617px;)? The corners are only expanding till the end of the text within the div (container5)

This is the css:

.container5 {background:#666666; color:#fff; margin:0 15px;}

.rbottom{display:block; background:#f57f20;}
.rtop{display:block; background:#eaeade;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#666666;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

.rl1 {margin: 0 0 0 5px; }
.rl2 {margin: 0 0 0 3px; }
.rl3 {margin: 0 0 0 2px; }
.rl4 {margin: 0 0 0 1px; height: 2px;}

.rr1 {margin: 0 5px 0 0; }
.rr2 {margin: 0 3px 0 0; }
.rr3 {margin: 0 2px 0 0; }
.rr4 {margin: 0 1px 0 0; height: 2px;}




div#blockdark {
 height: 617px;
 left: 468px;
 position: absolute;
 top: 150px;
 z-index: 1000000;
 width: 300px;
 overflow: visible;
 visibility: visible;

}

Thisi s the HTML:

<div id="blockdark"> 
<!--Begin custome code-->
<div class="container5">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
<p>Sed do eiusmod tempor incididunt ullamco laboris nisi ut labore et dolore
magna aliqua. Quis nostrud exercitation qui officia deserunt ut enim ad minim
veniam. In reprehenderit in voluptate mollit anim id est laborum. Duis aute
irure dolor consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>

<p>Lorem ipsum dolor sit amet, qui officia deserunt cupidatat non proident.
Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua.</p>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>
<!--End custome code-->

</div>

Answer 1

Because they are in normal flow.

You would need to absolutely position each one near the bottom of the element.

position: absolute;
bottom: 0;