Question

When developing my website at http://filmblurb.org, I’m having trouble with my footer. For my footer, I’m trying something new, I’m doing a table that stretches to the outer edges of the browser window, with the rest of the content (i.e. the posts, jQuery slider, etc.) slimmer than the width of the footer.

For my footer I have a table within a table, both of which contain one cell each. I want the outer table to stretch to 100% of the browser window and I’m planning on using this by placing some sort of background image. In front of that and in that table, I’m planning on putting my footer content (i.e. sitemap, contact information, copyright information, etc.) in this cell, which will span 960 px. This width is also equal to the width of the rest of my content on my website’s home page.

If someone can please help me out on this, I would greatly appreciate it. (If it helps, I’m using WordPress 3.2.1.)

Answer 1

First thing you need to do is place the div#footer in its proper position.

So, remove position:absolute; and height:1em;

Then add a float and a width

#footer {
   float: left;
   width: 100%;
}

Right now your div#footer is inside your div#wrap, which is keeping it centered and restricted from spanning the entire window width.

Remove it from the #wrap and place it under that div if you want it to span the entire page.

Finally, do not use tables for non-tabular data. Use divs instead.