瞭解相對和絕對定位：如何將內部div對齊到容器底部

Question

仍然學習如何使用div和css佈局。我有以下的html：

<div id="Fascione"> 
</div> 
<div id="Wrapper"> 
    <div id="Menu"> 
    </div> 
    <div id="Contenuto"> 
     <div id="Liturgia"> 
     </div> 
     <div id="Container"> 
      <div id="Ristorante"> 
      </div> 
      <div id="Insieme"> 
      </div> 
      <div id="Progetto"> 
      </div> 
     </div> 
     <div id="Unitre"> 
     </div> 
    </div> 
</div> 
<div id="Footer"> 
</div> 

和CSS的樣子：

html, body{width:100%;height:100%;} 
body{width:1024px; margin:0px auto;padding:0px;border-width:0px;} 
div#Fascione{width:inherit;height:125px;border-bottom:2px solid black;} 
div#Wrapper{width:inherit;padding:8px 0px 8px 0px;/*background-color:#647;*/} 
    div#Menu{float:left;width:200px;/*background-color:#F41;*/} 
    div#Contenuto{margin-left:208px;/*background-color:#9bb;*/} 
     div#Liturgia{float:left;width:34%;margin-bottom:1%;background-color:#987;} 
     div#Container{float:left;width:65%;margin-bottom:1%;margin-left:1%;background-color:#aaaaaa;} 
      div#Ristorante{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#123;} 
      div#Insieme{float:left;width:49%;margin-bottom:1%;margin-left:1%;background-color:#abc;} 
      div#Progetto{float:left;border-top:1px solid gray;background-color:#369;} 
    div#Unitre{clear:left;border-top:1px solid gray;background-color:#de7;} 
div#Footer{clear:left;width:inherit;height:40px;border-top:2px solid black;/*background-color:#1a9;*/} /* clear left needed! */ 

我想要做的是有「PROGETTO」格底邊框與「Unitre」頂部邊框粘在一起。

閱讀其他文章我試圖設置「容器」的位置：相對和「Progetto」的位置：絕對;底部：0px;但這不符合我的需要。

任何人都可以幫助我嗎？

Answer 1

與相對位置設置的容器是不是一個好practice.What你應該嘗試做的是從零邊距beetween的兩個div和只添加邊框到需要雙方例如：

Proggetto{ 
//no bottom border; 
border:1px 1px 0 1px; 
border-color:black; 
margin:0; 
} 
Unitre{ 
border:1px solid black 
margin:0; 
}