Im trying to expand my footer to 100%, basically the entire width of the screen. Its currently 100% of the main content area, but I would like to expand my footer background across the entire width. It can be seen here:
Thanks in advance,
Take your entire footer out of the #wrapper div and place that code after the last closing </div> of your document.
</div> <!-- end #wrapper -->
<p class="footer_pods">Toner Digital create tailored digital media solutions designed to ensure clients enhance their presence via web & print mediums.</p>
<p class="pod_title">Latest News</p>
<p class="footer_pods">We have recently taken on two exciting projects with growing local companies. Check out our <a href="portfolio.html">portfolio</a> for more info on our recent work.</p>
<p class="footer_pods">tel: +44 (0) 7793005031<br> email: <a href="">email@example.com</a></p>
Many Thanks kohoutek,
Its has worked, although Im now getting a scroll bar at the bottom of the browser. The footer DIV's width is 100%. Do you have any idea how to remove this?
that happens because your footer is over 100% width as you have a 1px border around the footer.
The width thus computes to 100% width + 1px (border left) + 1px (border right) = total width exceeds the width of the viewport.
You could set your #footer width to 99% (as an example) or leave it at 100% and remove the left and right border values.
border-top:1px solid red;
border-bottom:1px solid red;
Very Helpful, thank you. I think I need some sleep, making some silly mistakes.