html - footer does not inherit the positioning property? -


i going smooth html , css codes until problem facing , don't know happening.

my html patterns this.

in top <div id="header"> not have fixed width. have used image , used repeat-x property. , in header have navigation menu wrapped in container of 940px;

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

till content div codes fine. facing problem in positioning footer correctly. footer should not have fixed width , should not wrapped in container. defined footer div outside of content , container div right before closing of body , html tag.

when footer image have dimension of 50px x 290px; goes upward , placed content div. not come bottom. using temporarily margin-top:1600px; position correctly wrong.

why not inheriting position, tried giving every position attribute. not working :(,

what missing?

p.s: code lil lengthy didnt post here, instead explained happening. if still want see code can try , put minimal code.

thank you

edit : here link jsfiddle , code. http://jsfiddle.net/32shz/

the problem seems have been #footer wasn't clearing floated divs (and gosh, do divs don't you? 70? in one document?). so, adding:

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

seems have worked. i'm not sure, yet, why #footer isn't respecting margin: 0 auto; still, seems moving on right tracks. have at: jsfiddle.net/32shz/3/ (you'll note i've used jquery populate divs, see where. , added background-color #footer make more visible, these are, clearly, optional).


edited in response comment:

i confused jquery code. exactly.?

jquery javascript library, written provide cross-browser compatible abstraction, that, part, 1 set of code should produce consistent results cross-browser, ie chrome. api available review online, on at: jquery.com.

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

the code used, step step:

  1. found div elements on page, $('div')
  2. iterated on each of elements, , applied function. i iterator .each(function(i){...})
  3. worked on current element, $(this)
  4. appended <p> element, text contents `.append('

    div (' + + ') ' + $(this).attr('id') +'

    ')
  5. the $(this).attr('id') section looks @ current element , finds 'id' attribute, inserting string.

Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -