Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

trying to move a div

 
J. Kevin Robbins
Bartender
Posts: 1744
19
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am forced to use a company standard WebPage object that includes our header with menus and a standard footer. But because of the DOM structure, the footer floats up and down the page and it's driving me crazy. In order to fix this, I need to change the DOM structure. The standard structure looks like this:

<head></head>
<body>
<div id="mainmenu">
<div id="wrapper">
<div id="footer">
</body>

In order to fix the footer using CSS, I need a structure that looks like this:

<head></head>
<body></body>
<footer></footer>

So I'm trying create a simple javascript that moves that footer div outside of the body. I've tried this:

and this...

and this...

but the page stops loading halfway without throwing any errors. I'm not sure if I'm using the incorrect syntax, or if the DOM is so screwed up that this simply isn't going to work.

If you tell me "that should work" then I'll blame it on the WebPage object and give up. Am I approaching this correctly?



 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Um, the footer element needs to be inside of the body element.

Why don't you fix the issue with CSS?

Eric
 
J. Kevin Robbins
Bartender
Posts: 1744
19
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Crap. Stupid mistake. I misunderstood the sites I've been looking at like here and here. I always end up with a fixed footer with the page content scrolling underneath the footer and it looks terrible. Using position:fixed or position:absolute doesn't seem to allow the footer to move down when the page content extends beyond the footer.

So maybe I need to insert a wrapper container around the header and main content and then the footer.....back to the drawing board....
 
J. Kevin Robbins
Bartender
Posts: 1744
19
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
btw, thanks for getting pointed back in the right direction. I came up with this idea last night while working in the garden and tried to do it first thing this morning. I think I need more coffee before I start writing code...
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
set a min height on the wrapper element. Most normal layouts would call that area content.
 
J. Kevin Robbins
Bartender
Posts: 1744
19
Chrome Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Got it! That second link in my previous post was the most helpful, I just had to read it more carefully. Now my footers stay where they are supposed to. I think that "push" div was the key to avoiding the "content under the footer" problem. For future reference for others, this is the css I ended up with.



Thanks!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic