Div1をDiv1のすぐ下に置くにはどうすればいいですか

Question

これは私のコードです。私はハードコーディングされた次元ではないので、別のブラウザのresoultions（それが正しい用語であるかどうかはわからない）で動作するようにしたいと思います。

#div1 { 
 
    position: absolute; 
 
    background-color: cyan; 
 
    font-family: "Arial Black", Gadget, sans-serif; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    width: 300px; 
 
    border: 25px solid red; 
 
    padding: 25px; 
 
    top: 30%; 
 
    left: 50%; 
 
    margin: -100px 0 0 -150px; 
 
} 
 
#div2 { 
 
    background-color: cyan; 
 
    font-family: "Arial Black", Gadget, sans-serif; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    width: 300px; 
 
    border: 25px solid orange; 
 
    padding: 25px; 
 
}

<div id="div1">Greeting Card Generator</div> 
 
<div id="div2">Content Goes Here</div>

Answer 1

あなたも、ブートストラップと考えていますか？それはあなたの人生をずっと簡単にします。

とにかくここに行く：あなたはちょうど＃のDIV1のいくつかのプロパティを削除する必要が

#div1{ 

     background-color: cyan; 
     font-family: "Arial Black", Gadget, sans-serif; 
     font-size: 24px; 
     text-align: center; 
     width: 300px; 
     border: 25px solid red; 
     padding: 25px; 



    } 
    #div2{ 

     background-color: cyan; 
     font-family: "Arial Black", Gadget, sans-serif; 
     font-size: 24px; 
     text-align: center; 
     width: 300px; 
     border: 25px solid orange; 
     padding: 25px; 
    } 

Answer 2

、＃1 DIV1のためのあなたのCSSは次のようになります、

#div1 { 
    background-color: cyan; 
    font-family: "Arial Black", Gadget, sans-serif; 
    font-size: 24px; 
    text-align: center; 
    width: 300px; 
    border: 25px solid red; 
    padding: 25px; 
} 

Check this fiddle here