Footer width - wordpress

HTML & CSS
1

Hi Guys,

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:

http://www.tonerdigital.com/wordpress

Thanks in advance,

Paul

2

Take your entire footer out of the #wrapper div and place that code after the last closing </div> of your document.


          </div> <!-- end #wrapper -->

<div id="footer1">
		<div id="footer_content">
			<div id="foot_pod1">
				<p class="pod_title">Profile</p>
				<p class="footer_pods">Toner Digital create tailored digital media solutions designed to ensure clients enhance their presence via web &amp; print mediums.</p>
			</div>
			<div id="foot_pod2">
				<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>
			</div>
			<div id="foot_pod3">
				<p class="pod_title">Contact</p>
				<p class="footer_pods">tel: +44 (0) 7793005031<br> email: <a href="">info@tonerdigital.com</a></p>
			</div>
		</div>
	</div>
3

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?

Thank You,

Paul

4

Paul,

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.

#footer {
  border-top:1px solid red;
  border-bottom:1px solid red;
}
5

Very Helpful, thank you. I think I need some sleep, making some silly mistakes.