jQuery ajax .load resets page layout

Hi All, I am new to jQuery and Ajax, but not to web design and development in html, css, flash and swish etc.

I have a standard css/html web page and I am using .load to load an html page into a container.

The html page is stripped of everything except content and relevant resource links (no meta etc.).

My main website is centred in the browser, but when I load the html page into the container, the whole thing moves to the left of the browser.

What am I missing?

Main html:

<!DOCTYPE html PUBLIC>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kelvedon Clocks Ltd</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/nav01.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/st.css" type="text/css" media="all"/>
<script src="http://code.jquery.com/jquery-1.11.1.js"> </script>
</head>
<body>
<div id="content">
<div id="container">
<div id="header01"></div>
<div id="mainContent">
<div id="sshow">
<script>
$( "#sshow" ).load( "galleryAB2.html");
</script>

</div>
</div>
<div id="aside">
<div class="nav-box">
<ul id="navbar">
<li><a class="here"></a></li>
<li><a href="Open.html" class="open"></a></li>
<li><a href="Find.html" class="find"></a></li>
<li><a href="Kelvedon.html" class="kelvedon"></a></li>
<li><a href="Feering.html" class="feering"></a></li>
<li><a href="Local.html" class="local"></a></li>
<li><a class="blank"></a></li>
<li><a href="Next.html" class="next"></a></li>
<li><a href="Menu.html" class="menu"></a></li>
<li><a href="Contact.html" class="cont"></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

Main page css:

@charset "utf-8";
article, aside, audio, canvas, command, container, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{display:block;} mark, rp, rt, ruby, summary, time{display:inline}
body{background:#550714; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:100%; line-height:1.5em;
color:#ffff00; padding-top:40px; overflow:hidden;}
html{min-width:980px;}
html, body{height:800px;}
#content{padding:0px 0; min-width:980px; height:780px; background:none; padding-top:0px;}
#container{width:980px; height:780px; background-image:url(../images/mainback-19k.png); background-repeat:no-repeat;
background-position:50% 0; margin:0 auto; position: relative;}
#header01{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P1-Ab/1ab-0.png);}
#header02{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P2-Cl/2cl-0.png);}
#header03{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P3-Wat/3wat-0.png);}
#header04{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P4-Bar/4bar-0.png);}
#header05{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P5-Our/5our-0.png);}
#header06{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P6-Mus/6mus-0.png);}
#header07{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P7-Sln/7sln-0.png);}
#header08{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P8-Con/8con-0.png);}
#mainContent{width:830px; float:left; height:654px; margin-left:144px; margin-top:106px; overflow:hidden; position:absolute; background-image:none;}
#sshow{width:830px; height:654px; margin-left:0px; margin-top:0px; overflow:hidden; position: fixed; background:#550714;}
#aside{width:139px; height:780px; float:left; margin-left:0px; margin-top:0px; overflow:hidden;}
.nav-box{width:134px; height:766px; float:left; margin-left:5px; margin-top:7px; overflow:hidden; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; /*behavior:url(/js/PIE.htc);*/ position:left;}
h1{font:Bookman; color:#ffff00; font-size:28px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h2{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h3{font:Bookman; color:#ffff00; font-size:28px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h4{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h5{font:Bookman; color:#ffff00; font-size:26px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h6{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h7{font:Bookman; color:#ffff00; font-size:28px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h8{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h9{font:Bookman; color:#ffff00; font-size:18px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h0{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
.inside{padding:0px;}
.fleft{float:left;}
.left{float:left;}
.fright{float:right;}
.right{float:right;}
.clear{clear:both;}
.alignright{text-align:right;}
.alignLeft{text-align:left;}
.alignCenter{text-align:center;}
.blue {font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-style: normal; font-weight: normal; text-transform: none; color: #39F;}

import page html:

<head>
<link href="css/style22.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="lib/jquery.tools.js"></script>
  <script type="text/javascript" src="lib/jquery.custom.js"></script>
  
<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().piroBox({
   my_speed: 400, //animation speed
   bg_alpha: 0.1, //background opacity
   slideShow : false, // true == slideshow on, false == slideshow off
   slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
   close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
<link href="css/styleABpiro.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="wrapper">
<div id="main">
<div id="content">
  <div style="height:5px"></div>
   <div class="row">
    <div class="box_img2">
     <h1>The latest addition to our fleet</h1>
      <a href="images2/gallery_big7.jpg" class="pirobox_gal1" title="Our interests not only include clocks and watches"> <img src="images2/img37.jpg" alt="" /></a>
       <div style="height:10px"></div>
        </div>
         <div class="box_razd"></div>
    <div class="box_img2">
     <h1>The view from the roof of our shop</h1>
      <a href="images2/gallery_big8.jpg" class="pirobox_gal1" title="Even repairs and restoration have their 'Up Side'"><img src="images2/img38.jpg" alt="" /></a>
       <div style="height:10px"></div>
        </div>
         <div class="box_razd"></div>
    <div class="box_img2">
     <h1>Heritage Society presentation</h1>
      <a href="images2/gallery_big9.jpg" class="pirobox_gal1" title="Presenting a boquette of flowers to a member of the Kelvedon & Feering Heritage Society"><img src="images2/img39.jpg" alt="" /></a>
       <div style="height:10px"></div>
        </div>
   </div>
  <div style="height:20px"></div>
   <div class="row">
    <div class="box_img2">
     <h1>We sail, to relax</h1>
      <a href="images2/gallery_big10.jpg" class="pirobox_gal1" title="We have an old sailing ship that we are restoring"><img src="images2/img40.jpg" alt="" /></a>
       <div style="height:15px"></div>
        </div>
         <div class="box_razd"></div>
    <div class="box_img2">
     <h1>50 years of advancement</h1>
      <a href="images2/gallery_big11.jpg" class="pirobox_gal1" title="In 2013 Chris celebrated 50 years in the clock and watch making industry!"><img src="images2/img41.jpg" alt="" /></a>
       <div style="height:15px"></div>
        </div>
         <div class="box_razd"></div>
    <div class="box_img2">
     <h1>The shop at the end of the rainbow</h1>
      <a href="images2/gallery_big12.jpg" class="pirobox_gal1" title="We are sure that this is a sign representing our commitment to our customers and our trade"><img src="images2/img42.jpg" alt="" /></a>
       <div style="height:15px"></div>
        </div>
   </div>
  <div style="height:10px"></div>
   <div style=" height:21px; padding-left: 10px;">
    <a class="gal_num" href="galleryAB.html">1</a>
     
      
   </div>
</div>

  
<div style="height:15px"></div>
</div>
</div>
</body>
</html>

import page css:

@charset "utf-8";
article, aside, audio, canvas, command, container, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{display:block;} mark, rp, rt, ruby, summary, time{display:inline}
body{background:#550714; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:100%; line-height:1.5em;
color:#ffff00; padding-top:40px; overflow:hidden;}
html{min-width:980px;}
html, body{height:800px;}
#content{padding:0px 0; min-width:980px; height:780px; background:none; padding-top:0px;}
#container{width:980px; height:780px; background-image:url(../images/mainback-19k.png); background-repeat:no-repeat;
background-position:50% 0; margin:0 auto; position:relative;}
#header01{
width:834px;
height:100px;
position:absolute;
margin-left:144px;
margin-top:6px;
background-image:url(../Images3/P1-Ab/1ab-0.png);
}
#header02{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P2-Cl/2cl-0.png);}
#header03{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P3-Wat/3wat-0.png);}
#header04{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P4-Bar/4bar-0.png);}
#header05{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P5-Our/5our-0.png);}
#header06{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P6-Mus/6mus-0.png);}
#header07{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P7-Sln/7sln-0.png);}
#header08{width:834px; height:100px; position:absolute; margin-left:144px; margin-top:6px; background-image:url(../Images3/P8-Con/8con-0.png);}
#mainContent{width:830px; float:left; height:654px; margin-left:144px; margin-top:106px; overflow:hidden; position:absolute; background-image:none;}
#aside{width:139px; height:780px; float:left; margin-left:0px; margin-top:0px; overflow:hidden;}
.nav-box{width:134px; height:766px; float:left; margin-left:5px; margin-top:7px; overflow:hidden; border-radius:0px; -moz-border-radius:0px;
-webkit-border-radius:0px; /*behavior:url(/js/PIE.htc);*/ position:left;}
#sshow{
width: 830px;
height:620px;
margin:0 auto;
float:left;
position:left;
}
h1{font:Bookman; color:#ffff00; font-size:28px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h2{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h3{font:Bookman; color:#ffff00; font-size:28px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h4{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h5{font:Bookman; color:#ffff00; font-size:26px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h6{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h7{font:Bookman; color:#ffff00; font-size:28px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h8{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
h9{font:Bookman; color:#ffff00; font-size:18px; font-weight:bold; padding:0px 0px 3px 3px; text-align:center;}
h0{font:Bookman; color:#550715; font-size:28px; font-weight:bold; padding:0px 0px 0px 0px; text-align:center;}
.inside{padding:0px;}
.fleft{float:left;}
.left{float:left;}
.fright{float:right;}
.right{float:right;}
.clear{clear:both;}
.alignright{text-align:right;}
.alignLeft{text-align:left;}
.alignCenter{text-align:center;}
.blue {font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-style: normal; font-weight: normal; text-transform: none; color: #39F;}

Both these pages load perfectly individually.

Many thanks,

Peter.

Topic Participants
ukpeterg
jtara-jquery

jQuery ajax .load resets page layout

jQuery ajax .load resets page layout

Topic Participants

ukpeterg

jtara-jquery