You need to contruct a basic page template for yourself. Something like this:

Code: Select all

<div id='wrapper'>
    <div id='header'>
   
   </div>
   <div id='container'>
       <div id='navigation'>
      
      </div>
      <div id='content'>
      
      </div>
      <div id='right-hand-panel'>
      
      </div>
   </div>
   <div id='footer'>
   
   </div>
</div>

Ideally, you should place the header, navigation, right-hand-panel and footer in seperate files of their own and 'include' them into the pages. That way your main pages remain smaller in size and the browser doesn't have to download this info for every page called.

With regard to the use of your background images. These only show within the confines of the div in which they are defined, therefore if you want an image to spread across the top and down one side, you will need to slice this up and load one part into the header and the other into, e.g., the navigation div.

Your footer image can be positioned to the right-hand side of the footer div.

With the right css, your central section that includes the content, navigation and right-hand-panel divs will expand as required according to which ever of these three divs is the longest.