footer does not inherit the positioning property?

Question

Hi there.

i was going smooth with my html and css codes until this problem i am facing now and i don't know what is happening.

my html patterns is like this.

in the top is <div id="header"> which does not have any fixed width. i have used an image and used the repeat-x property. and in the header i have navigation menu wrapped in the container of 940px;

in middle is the <div id="content"> which is wrapped with container of the same 940px;

till the content div my codes are fine. now i am facing the problem in positioning the footer correctly. my footer should not have any fixed width and should not be wrapped in the container. so i defined the footer div outside of the content and container div that is right before the closing of body and html tag.

when i do this the footer image which have the dimension of 50px X 290px; goes upward and is placed from the content div. it does not come to the bottom. i am using temporarily margin-top:1600px; to position it correctly which is wrong.

why is it not inheriting the position, i tried giving every position attribute. it is not working :(,

what am i missing?

P.S: the code was lil lengthy so i didnt post it here, instead i explained what is happening. if you still want to see my code i can try and put the minimal code.

thank you

EDIT : Here is the link to jsfiddle and my code. http://jsfiddle.net/32ShZ/

Answer 1

The problem seems to have been that the #footer wasn't clearing the floated divs (and gosh, you do like your divs don't you? 70? In one document?). So, adding:

#footer {
clear: both;
width:940px; /* copied from your other divs */
}

seems to have worked. I'm not sure, as yet, why the #footer isn't respecting margin: 0 auto; but still, it seems to be moving on the right tracks. Have a look at: jsfiddle.net/32ShZ/3/ (you'll note I've used some jQuery to populate all the divs, so I could see what was where. And added a background-color to #footer to make it more visible, these are, clearly, optional).

---

Edited in response to comment:

i am confused about the jQuery code. what is it exactly.?

jQuery is a JavaScript library, written to provide a cross-browser compatible abstraction, so that, for the most part, one set of code should produce consistent results cross-browser, from IE to Chrome. Its api is available to review online, over at: jQuery.com.

$('div').each(
    function(i) {
        $(this).append('<p>Div (' + i + ') ' + $(this).attr('id') +'</p>');
    }
);

The code I used, step by step:

1. found all the div elements on the page, $('div')
2. iterated over each of those elements, and applied a function. The i is an iterator .each(function(i){...})
3. worked on the current element, $(this)
4. appended a <p> to the element, with text contents `.append('

   Div (' + i + ') ' + $(this).attr('id') +'

   ')
5. the $(this).attr('id') section looks at the current element and finds its 'id' attribute, inserting that into the string.