I have organized two div tags within a container tag. The container is responsible for centering and fixing the content.
I am looking to create some space at the bottom of the webpage, separating 'home-segment' from the bottom of the browser window. However, I am encountering an issue where 'bottom-spacer' appears above 'home-segment'. How can I adjust it to sit below 'home-segment' as intended?
<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.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 { display: block; float: left; position: relative; overflow: hidden; padding: 10px; }
.bottom-spacer { padding-bottom: 25px; }