強制div到下一行

我試圖讓「footer」div位於「main」div下面，除了它一直出現在它旁邊。我只是希望它直接坐在前面的div下面（不能被強迫到底部），除非它總是坐在標題下方。強制div到下一行

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      Heading 
     </div> 
     <div class="main"> 
      Content 
     </div> 
     <div class="footer">More details on how you can help coming soon.</div> 
    </div> 
</body>

CSS：

body { 
    background-image: url("./../img/bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    margin: 0; 
    padding: 0; 
} 

.header{ 
    color: #FFFFFF; 
    font-size: 14vw; 
    text-align: center; 
    font-family: OSWALD; 
    font-style: normal; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 2px; 
    width: 100%; 
    line-height: 1.2em; 
} 

.main{ 
    display: inline-block; 
    width: 300px; 
    height: 380px; 
    overflow: hidden; 
    padding: 19px 22px 7px; 
    color: #fff; 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-family: "futura-pt", sans-serif; 
    letter-spacing: 2px; 
    line-height: 45px; 
    position: absolute; 
    right: 0px; 
} 

.contact{ 
    border-top: 6px solid #e2d056; 
    border-bottom: 6px solid #e2d056; 
    width: 250px; 
    margin: 25px 0 0; 
    padding: 10px 22px 10px; 
    text-align: center; 
} 

.footer { 
    color: #fff; 
    font-size: 13px; 
    text-transform: uppercase; 
    font-weight: 700; 
    font-family: "futura-pt", sans-serif; 
    letter-spacing: 2px; 
    line-height: 25px; 
    text-align: left; 
    padding-left: 30px; 
}

來源

2015-08-15 GeeJay

不要使用display：inline-block的然後。如果你能削減你的巨大的CSS會很好。 – kornieff

只需刪除main的位置屬性。它會工作。 – WisdmLabs