0

I have a footer on page and then I want to place a few divs above it but for some reason the footer seems to come up beside this divs instead of below it

I want the main footer to be above the footer

here is my code

<div id ="mainfooter">

<div id = "links">

<h2>Quick Links</h2>

</div>

<div id ="sunday">

<h2>Join us this Sunday</h2>

<p>11am &amp; 6:30pm</p>

</div>

<div id="findus">

	<h2>Find Us</h2>

	

</div>
</div>


<div id="footer">

<p id="copyright"> &copy; <span id="copyright_span"></span> Elim Church</p>


</div>

here is my css

 #links
{
    padding-left: 20px;
    color: #000;
    width: 150px;
    float: left;
}

#sunday{
    padding-left: 100px;
    width: 200px;
    color: #000;
    float: left;
}


#findus{
    padding-left: 100px;
    color: #000;
    width: 200px;
    float: left;
}

#mainfooter
{
    padding-top: 50px;
}


#footer {
    
   padding-top: 50px;
    padding-left:100px;
   background:#F3EFE0;    
 
    padding-bottom:40px;
    }

1
  • you can also use footer tag May 25, 2015 at 15:24

1 Answer 1

1

You have to clear after floated elements, add clear: both to #footer.

#footer {clear: both;}

https://jsfiddle.net/u0krtdjo/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.