SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer width - wordpress

    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. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Take your entire footer out of the #wrapper div and place that code after the last closing </div> of your document.

    Code HTML4Strict:
              </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>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code CSS:
    #footer {
      border-top:1px solid red;
      border-bottom:1px solid red;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very Helpful, thank you. I think I need some sleep, making some silly mistakes.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •