I'm working on a project where I have absolutley no choice but to use a web server that will only serve static web pages.

This is a temporary solution (hopefully) but the site is complex enough that I need to be able to seperate at least SOME of the menus into seperate code pieces to embed into each page.

I thought I found the solution by using jQuery .load() function. This works great if I'm only loading one thing, but if I try to load two... it just hangs there telling me that the images are being downloaded, no errors, nothing.

here is the code I'm trying to work with

```
<!DOCTYPE html>
<html>
<head>
  <title>Test Site</title>
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  <link rel="icon" href="Graphics/Icons/favicon.ico" type="image/vnd.microsoft.icon" />
  <link rel="Shortcut Icon" href="Graphics/Icons/favicon.ico" />
  <link rel="Stylesheet" type="text/css" href="StyleSheets/Main.css" />
  <script type="text/javascript">
    $(document).ready(function () {

      $("#footer").load("WebParts/Footer.html"); 
      $("#header1").load("WebParts/Header.html");     
    });
  </script>
</head>
<body>
  <div id="header1" />
  <div id="content">
    &nbsp;
  </div>
  <div id="footer" />
</body>
</html>

```

where there is a directory with .html files names WebParts

the footer.html file looks something like

```
 <div>HI! I'm a footer <img src="someimage.png" alt="image description" /></div>

```

the header.html file looks something like

```
 <div>HI! I'm a header! yay look at me</div>

```

It'll load ONE of the divs, but never load anything else again.

any help would be greatly appreciated.