1

I have placed two divs inside a container tag. The container simply centers and fixes the content.

I want to have space at the bottom of the site, between home-segment and the bottom of the browser. For some reason however, the bottom-spacer floats above home-segment. How can I move it down below home-segment?

    <div class="container">

    // Content

    <div class="home-segment">
        <div class="col w33 col-first">
            <h2>A title</h2>
            <p>Lorem ipsum.</p>
        </div>
        <div class="col w33">
            <h2>Hey there.</h2>
        </div>
        <div class="col w33 col-last">
        </div>
    </div>

    <div class="bottom-spacer"></div>

</div>

CSS:

/* Home Page Columns */

.home-segment { width: 830px; float: left; }
.col-first { margin-left: 0 !important; }
.col.w33 { width: 220px; min-height: 200px; max-height: 200px; border: 1px solid #D9D4D4; background: #fff; margin-right: 15px; }
.col.w33 h2 { font-size: 18px; margin-bottom: 10px; }
.col-last { margin-right: 0 !important; }
.col { display: block; float: left; position: relative; overflow: hidden; padding: 10px; }

.bottom-spacer { padding-bottom: 25px; }
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
zzwyb89
  • 472
  • 1
  • 7
  • 21

1 Answers1

1

It is shifting to the top as you are not clearing your floated elements

Add clear: both; to .bottom-spacer

.bottom-spacer { clear: both;padding-bottom: 25px; background: #f00;}

Demo

For detailed explanation for the behavior, you can refer my answers here and here

Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278