テキストdivが重複しないようにする

Question

私は、テキストを含む2つのdivを互いに下に置いて、テキストの高さに合わせて自動的に調整しようとしていますが、divのように重なっているようです。これまでのところ、それは次のようになります。

次のように私のHTMLは次のとおりです。

<div class="one_half_left"> 
    <div class="text1">Text</div> 
    <div class="text2">XYZ</div> 
</div> 

とCSSは次のとおりです。

.one_half_left { 
    margin: 40px 0 0px 40px; 
    float:left; 
    width:44%; 
} 

.text1{ 
    font-family:'NimbusSans', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;  
    font-size:90px; 
    color:#948e7d; 
    min-height: 90px; 
} 

.text2{ 
    font-family:'NGBEC', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;  
    font-size:140px; 
    margin: 0 0 110px 0; 
    color:#305d0b; 
    min-height: 140px; 
} 

誰もがどのようにお勧めできます私はそれを修正することができますか？前もって感謝します！

Answer 1

私は、あなたが本当に低解像度の画面を使用しているか、フルスクリーンで開いていないことが問題だと思います。その場合、ブラウザを変更することはそのトリックを行うでしょう。

そうでない場合：私はどうなる

事はCSSでおせっかいせずに2つのdivを分離するように、いくつかの<br>タグを追加することです。

コードは今のようになります。

<div class="one_half_left"> 
    <div class="text1">Text</div> 
    <br> 
    <br> 
    <br> 
    <div class="text2">XYZ</div> 
</div> 

は、CSSが手つかずのままにしておきます。

Answer 2

Hey You can add clear:both; in both class:- 
.one_half_left { 
    margin: 40px 0 0px 40px; 
    float:left; 
    width:44%; 
} 

.text1{ 
    font-family:'NimbusSans', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;  
    font-size:90px; 
    color:#948e7d; 
    min-height: 90px; 
    ***clear:both;*** 
} 

.text2{ 
    font-family:'NGBEC', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;  
    font-size:140px; 
    margin: 0 0 110px 0; 
    color:#305d0b; 
    min-height: 140px; 
    ***clear:both;*** 
}