File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
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
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
Bartender

Joined: Dec 16, 2010
Posts: 829
    
  13

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?




"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
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
Bartender

Joined: Dec 16, 2010
Posts: 829
    
  13

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

Joined: Dec 16, 2010
Posts: 829
    
  13

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
Bartender

Joined: Dec 16, 2010
Posts: 829
    
  13

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
100% height does not work
Is there something better then event.pageX/Y?
CSS Framework
DIV layout issues
accessing iFrame elements