Absolute positioning makes table wider than window

I'm an iPhone Developer who's quite new to web development so please forgive me if I'm making some stupid mistakes.

My problem can be demonstrated on this jsfiddle (with no js). I have a table at the top which is at 100% width. This displays fine. The table at the bottom is of the same class, has 100% width, but because I set position absolute for it's ID (#footerTable), the width is wider than 100%! - Could you please tell me what I'm doing wrong (the CSS/html 开发者_如何学编程is in the link - there's not very much of it).

---

http://jsfiddle.net/xnhMY/

When you absolute positioned the table, it's 100% width was being calculated as so:

width of body element + padding of body element

---

Specify your left parameter for the second table:

#footerTable {
    position:absolute;
    bottom:20px;
    left:0px; 
}

---

The reason table.loginTable is wider than 100% width is because it's 100% width plus 20px (the left and right 10px of padding).

---

You probably want your footer to be at the bottom at all time with this setup, however a default style on the body (body {padding:10px;}) means that while the first table is in-flow, 100% is w/e is left inbetween those dimensions of the body.

But when you position your second table absolute, it will place is relative to the body tag which has that 10px padding. But since the second table is absolutely positioned it has no furter relation to the body tag and 100% width is the real width of the body, without the padding. You've seen the result of that. To fix it reset the padding on the body tag body {padding:0;} or explicitly set the left / right distances for your footer #footerTable {left:10px;right10px;}