Footer extending outside of body margins

Question

I have an HTML body with a fixed with (of 960px). I'd like to have the footer (a descendant of body) to go from one screen border to the other screen border (with a background color or an image) -- that is beyond the 960px limit of the body.

Is that possible at all?

HTML is generated (from an Org file), so I can't really play with the HTML itself. — user3341592, Nov 17 '15 at 21:18
You can use negative margins : http://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top-5-margin-bottom5 — N. Hodin, Nov 17 '15 at 21:21
Not if the page width is unknown. You'd have to dynamically calculate. — isherwood, Nov 17 '15 at 21:25
Use Jquery to modify the style (Or whatever you want to change after the HTML is brought in from the Org file) - Look at this JsFiddle [link] (http://jsfiddle.net/m73Lx6ft/) where the body tag is inline styled but we use Jquery to modify it by re-writing the inline style. if the Org file HTML is brought in AFTER your existing tag, you can write your own CSS classes and then have Jquery assign them where needed. — DMSJax, Nov 17 '15 at 21:43
I understand your comments about my question. The problem is finding an answer to my question was almost impossible (with Google) without the help of experts like you, giving hints on the direction to follow. I've tried zillions of things with overflow and such, but was never on the right track. Thanks for having helped me! — user3341592, Nov 19 '15 at 10:52

score 0 · Answer 1 · answered Nov 17 '15 at 21:27

The simple answer is to not put an explicit width on the body, but instead use a child container element for those areas of the page that need it:

<body>
    <div class="narrower-container"> ... </div>
    <div class="full-width-container"> ... </div>
</body>

<style>
.narrower-container {
    width: 960px;
    margin: 0 auto; /* center alignment */
}
</style>

Another option is to use absolute positioning for the footer and put an appropriate padding on the body to account for its height.

I'll make a couple of tests, and come back to you with a need for further explanation or a warm thank you. Thank you already, anyway, for your help! — user3341592, Nov 17 '15 at 22:27

score 0 · Accepted Answer · answered Nov 17 '15 at 21:40

It is not a good thing to put a fixed width on body. If you can't change that, then I think you can put position:relative on the <html>, and put

position:absolute
left:0
right:0
bottom:0

on the footer. But this approach depends on there is no relative positioned elements between <html> and your <footer>

In general, if you want a child element's width to exceed its parent's, you can use several ways: 1) negative margin: this would require you know exactly how much pixels the child's width would be exceeding 2) absolute/relative postioning: this is more suitable for your situation because you want the child's width be relative to the screen(the body's width is irrelevant in your case). So you just have to set the element with the screen's width (in your case <html>) to be relative postioned and the desired child to be absolutely positioned.

You say it's not a good thing to put a fixed width on the body. I've always done that -- I want a look like SO for example (with some fixed maximum width of text displayed and big margins with screen width allows it). Clearly, I don't master yet the right habits. What do you mean I should do to be clean? — user3341592, Nov 17 '15 at 22:26
Your solution works perfeclty, with an added padding for body, as adviced by @isherwood. Thanks a lot! — user3341592, Nov 19 '15 at 10:50

Footer extending outside of body margins

2 Answers2