*
The moose likes HTML, CSS and JavaScript and the fly likes trying to move a div Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "trying to move a div" Watch "trying to move a div" New topic
Author

trying to move a div

J. Kevin Robbins
Ranch Hand

Joined: Dec 16, 2010
Posts: 632
    
    7

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?




"There is no reason for any individual to have a computer in his home" ~ Ken Olson, Co-founder of DEC, 1977
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
Ranch Hand

Joined: Dec 16, 2010
Posts: 632
    
    7

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
Ranch Hand

Joined: Dec 16, 2010
Posts: 632
    
    7

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

Joined: Nov 08, 2001
Posts: 15376
    
    6
set a min height on the wrapper element. Most normal layouts would call that area content.
J. Kevin Robbins
Ranch Hand

Joined: Dec 16, 2010
Posts: 632
    
    7

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!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: trying to move a div
 
Similar Threads
accessing iFrame elements
Is there something better then event.pageX/Y?
DIV layout issues
CSS Framework
100% height does not work