2

I have multiple div's and most of which are float left. If I put a position absolute and bottom 0px on the page, the footer will jump halfway up the page and sit on top of the content. Here is my html: 

<div class="main-content">
    <div class="product-boxes">
        <div class="box-left">
            <h3>Corporate Apparel</h3>
        </div>
        <div class="box-middle">
            <h3>Tradeshow</h3>
        </div>
        <div class="box-right">
            <h3>Desk &amp; Office</h3>
        </div>
    </div>
    <div class="category-links">
        <ul>
            <li></li>
            <ul>
    </div>
    <div class="product">
        <div class="featured-item"></div>
    </div>
    <div class="order-summary">
        <p>list of cart items</p>
    </div>
</div>
<div class="footer"> </div>

And here is my CSS: 

    .main-content {
         width: 85%;
         margin: 0 px auto;
     }
    .main-content: after {
         content: '';
         display: block;
         clear: both;
     }
     .footer {
         background: #cdced0;
         height: 112 px;
         padding: 25 px 0 px 25 px 0 px;
         width: 100% ;
         font-family: Arial, 'Helvetica Neue', Helvetica, sans - serif;
         clear: left;
     }
Zach Spencer
  • 1,859
  • 15
  • 21
Vanessa Weisskopf
  • 31
  • 3
  • possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – Sleek Geek Jan 15 '15 at 21:29

1 Answers1

2

You can try putting an empty <div class="clear"></div> after your divs and give it the following property and value .clear { clear:both; }. Additionally, you can try to add some additional rules to ensure it spans the entire page .clear { clear:both; width:100%; float:left; }

frshjb373
  • 627
  • 9
  • 27