CODEWITHSUNDEEP
htmlcss
MattyAB
MattyAB

Reputation: 375

HTML footer not at bottom

I am adding a Footer to my page, but it is not going to the bottom of the page where I want it. I understand that there are many questions that have already been posted about this, but I have been through the solution of very on and nothing has worked.

The footer not going to the bottom of the page

Here is my html: http://pastebin.com/qXA9PBeq And here is my CSS: http://pastebin.com/hHiGAKck

If anyone wants it, here is a link to the current website: http://thegeekcircle.com/ And here is the whole site: https://www.dropbox.com/s/jv8hoxhmvws7u4s/site.zip?dl=0

Why is the footer not at the bottom of the page? How can I fix it?

Thanks!

Upvotes: 0

Views: 103

Answers (1)

Matt Greenberg
Matt Greenberg

Reputation: 2330

The problem is your floating divs in the '.mainBody' section. The footer needs to clear the divs you have floated in your code. The best way to fix this is with something we called a 'clearfix hack'. Here is how you set it up

CSS

  //Add this to your CSS
 .clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
 }

HTML

       // Add clearfix class to this div
      <div class="mainBody clearfix">
        <div class="leftBodyText">
            <p>
                   // big block of code
            </p>
        </div>
        <div class="rightBodyVideo">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/XDN9BXLFGhg" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <div id="footer">
        <p>
            &copy The Geek Circle 2015
        </p>
    </div>

Let me know if you have any questions.

Upvotes: 3

Related Questions