footer - フッターセクションがその上の要素にぶつかる

Question

私は Web デザインに関しては比較的新しいので、ここに書いていることが理にかなっていることを願っています。. .

私のページには 3 つのセクションがあります。ヘッダー、中間セクション、およびフッター。中央セクション内には、画像とテキストを含む 3 つの div があり、それぞれが中央セクション全体の幅の 30% を占めています。ページを小さくすると、フッターがこの中央セクションにぶつかります。もちろん、フッター セクションを一番下に残してレスポンシブにしたいです。

最初は、これらの 3 つの div を左にフロートさせていましたが、これはフッターの移動と関係があるのではないかと考えました。しかし、その後、div をインライン ブロックに変更しました。

私もクリアしようとしました：両方。ページを縮小すると、フッターが上に移動し続けます。

うまくいけば、私は理にかなっていて、誰かが助けることができます. ありがとう。

HTML:

<section class='mid-section'>
    <div class='one-third'>
        <a href='thai-tattoo.html'><img src='https://farm2.staticflickr.com/1528/26102511281_67fdc7c189_m.jpg' alt='Bangkok street'></a>
            <h3>HEADLINE</h3>
            <p>TEXT</p>
    </div>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
    </div>

    <div class='one-third'>
        <a><img src='http://gratisography.com/pictures/264_1.jpg'><h3>HEADLINE</h3><p>TEXT</p>
    </div>


</section>

<div class='bottom-section'>
    <div class='social-icons'>
<p > Follow us on the Web </p>
</div>
</div>

CSS:

.one-third  {
    width: 30%;
    display: inline-block;
    margin: 5% 0 0 2.5%; }

.one-third img {
    width: 100%;
    height: 300px; }

.one-third p {
    margin: 0.5em; }

.tattoo-text  {
    width: 60%;

    margin: 50px; }

.tattoo-h {
    font-size: 25px; }


.tattoo-pic {
    width: 60%;
    float: right;
    margin: 10px; }

.quaint-street-pic {
    width: 60%;
    float: left;
    margin: 10px;
    height: 300px; }


.social-icons {
    float: right;
    margin: 100px 100px 0 0; }