Problème avec les coins arrondis sans image

Question

Quelqu'un peut-il m'expliquer pourquoi les coins inférieurs ne sont pas en expansion avec le div blockdark (hauteur: 617px;)? Les angles ne sont en expansion jusqu'à la fin du texte dans la div (container5)

Ceci est le 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 du 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

Parce qu'ils sont en flux normal.

Vous devez absolument positionner chacun près du bas de l'élément.

position: absolute; 
bottom: 0;