フッタがヘッダのすぐ後ろに表示される

私はウェブサイト上で作業しています。ヘッダーとフッターを作成しましたが、ヘッダーの直後にフッターが表示されているのは非常に奇妙です。私は間に他のdivを持っていますが、なぜそれがそれらの後に表示されないのか理解できません。ご覧ください。ありがとうございました。あなたのdivのフッタがヘッダのすぐ後ろに表示される

<title> Website</title> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/core.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/selector.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/event.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/ajax.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/fx.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iutil.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/idrag.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/accordion.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/carousel.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/fisheye.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iautocompleter.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/icassistant.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iexpander.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/imagebox.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iresizable.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iselect.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/islider.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/islideshow.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/isortables.js"></script> 
     <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/ittabs.js"></script> 
<style type="text/css" media="screen"> 
* 
{  
    margin: 0; 
    padding: 0; 
} 
img 
{ 
    border: none; 
} 
body 
{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    color: #666666; 
    background-color: #0C9; 
} 
#carousel 
{ 
    width: 400px; 
    height: 150px; 
    position: absolute; 
    top: 100px; 
    left: 50%; 
    margin-left: -350px; 
} 
#carousel a 
{ 
    position: absolute; 
    width: 110px; 
} 

#ImageBoxOverlay 
{ 
    background-color: #000; 
    z-index: 1000; 
} 
#ImageBoxOuterContainer{ 
    z-index: 1000; 
} 
#ImageBoxCaption 
{ 
    background-color: #F4F4EC; 
} 
#ImageBoxContainer 
{ 
    width: 250px; 
    height: 250px; 
    background-color: #F4F4EC; 
} 
#ImageBoxCaptionText 
{ 
    font-weight: bold; 
    padding-bottom: 5px; 
    font-size: 13px; 
    color: #000; 
} 
#ImageBoxCaptionImages 
{ 
    margin: 0; 
} 
#ImageBoxNextImage 
{ 
    background-image: url(images/imagebox/spacer.gif); 
    background-color: transparent; 
} 
#ImageBoxPrevImage 
{ 
    background-image: url(images/imagebox/spacer.gif); 
    background-color: transparent; 
} 
#ImageBoxNextImage:hover 
{ 
    background-image: url(images/imagebox/next_image.jpg); 
    background-repeat: no-repeat; 
    background-position: right top; 
} 
#ImageBoxPrevImage:hover 
{ 
    background-image: url(images/imagebox/prev_image.jpg); 
    background-repeat: no-repeat; 
    background-position: left bottom; 
} 
#header 
{ 
    width:auto; 
    height:40px; 
    background-color:#09F; 
} 
#footer 
{ 
    width:auto; 
    height:40px; 
    background-color:#09F; 
    clear: both; 
} 
</style> 
<script id="__isTpiViewExists"></script><link rel="stylesheet" type="text/css" href="chrome-extension://pacgpkgadgmibnhpdidcnfafllnmeomc/css/about.css"></head><style type="text/css" id="CWToolbarStyle">html { padding-top: 0px !important;}</style><link rel="stylesheet" type="text/css" href="data:text/css,"> 
<!-- I have edited html { padding-top: 34px !important; to html { padding-top: 0px !important;} on the previous line --> 

<body> 
<div id="header"> 

</div> 
<div id="carousel" style="top: 134px !important; " class="SkipMeIAmAlradyAbsolutePushed"> 
    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw1.jpg" title="Moon eclipse" rel="imagebox" style="top: 25.970793906497065px; left: 18.546546530145918px; width: 86px; height: 48px; z-index: 60; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw1.jpg" width="100%"></a> 
    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw2.jpg" title="Rain drops" rel="imagebox" style="top: 6.851401944245097px; left: 123.75034466446243px; width: 57px; height: 32px; z-index: 12; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw2.jpg" width="100%"></a> 
    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw3.jpg" title="Church" rel="imagebox" style="top: 2.8806080377480257px; left: 415.2037981343167px; width: 51px; height: 28px; z-index: 2; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw3.jpg" width="100%"></a> 
    <a href="http://interface.eyecon.ro/demos/images/imagebox/lights1.jpg" title="City lights" rel="imagebox" style="top: 17.52920609350293px; left: 601.9534534698541px; width: 73px; height: 41px; z-index: 39; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_lights1.jpg" width="100%"></a> 
    <a href="http://interface.eyecon.ro/demos/images/imagebox/lights2.jpg" title="Flash lights" rel="imagebox" style="top: 36.6485980557549px; left: 496.74965533553757px; width: 102px; height: 57px; z-index: 87; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_lights2.jpg" width="100%"></a> 
    <a href="http://interface.eyecon.ro/demos/images/imagebox/lights3.jpg" title="Laser lights" rel="imagebox" style="top: 41.119391962251996px; left: 205.29620186568388px; width: 108px; height: 60px; z-index: 97; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_lights3.jpg" width="100%"></a> 
<div style="position: absolute; z-index: 1; top: 0px; left: 0px; "><canvas style="position: absolute; top: 72px; left: 18px; width: 86px; height: 24px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 37px; left: 123px; width: 57px; height: 16px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 29px; left: 415px; width: 51px; height: 14px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 57px; left: 601px; width: 73px; height: 20px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 92px; left: 496px; width: 102px; height: 28px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 100px; left: 205px; width: 108px; height: 30px; " height="31" width="110"></canvas></div></div> 
<script type="text/javascript"> 
    window.onload = 
     function() 
     { 
      $('#carousel').Carousel(
       { 
        itemWidth: 110, 
        itemHeight: 62, 
        itemMinWidth: 50, 
        items: 'a', 
        reflections: .5, 
        rotationSpeed: 1.8 
       } 
      ); 
      $.ImageBox.init(
       { 
        loaderSRC: 'images/imagebox/loading.gif', 
        closeHTML: '<img src="images/imagebox/close.jpg" />' 
       } 
      ); 
     }; 
</script> 
     <script language="JavaScript" type="text/javascript">var client_id = 1;</script> 
     <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script> 
     <noscript> 
</noscript> 
<div id="ImageBoxOverlay" style="position: absolute; display: none; top: 0px; left: 0px; opacity: 0; "> </div><div id="ImageBoxOuterContainer" style="display: none; position: absolute; overflow-x: hidden; overflow-y: hidden; top: 0px; left: 0px; text-align: center; background-color: transparent; "><div id="ImageBoxContainer" style="display: none; position: relative; overflow-x: hidden; overflow-y: hidden; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; top: 0px; left: 0px; z-index: 2; "><img src="./Carousel demo - Interface plugin for jQuery_files/loading.gif" id="ImageBoxLoader" style="position: absolute; "><a id="ImageBoxPrevImage" href="http://interface.eyecon.ro/demos/carousel.html#" style="position: absolute; display: none; overflow-x: hidden; overflow-y: hidden; text-decoration: none; "> </a><a id="ImageBoxNextImage" href="http://interface.eyecon.ro/demos/carousel.html#" style="position: absolute; overflow-x: hidden; overflow-y: hidden; text-decoration: none; "> </a></div><div id="ImageBoxCaption" style="position: relative; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; z-index: 1; "><div id="ImageBoxCaptionText" style="padding-left: 10px; "> </div><div id="ImageBoxCaptionImages" style="padding-left: 10px; padding-bottom: 10px; "> </div><a id="ImageBoxClose" href="http://interface.eyecon.ro/demos/carousel.html#" style="position: absolute; right: 10px; top: 0px; "><img src="./Carousel demo - Interface plugin for jQuery_files/close.jpg"></a></div></div><div id="mainContainer_CTID"><div class="fixedDiv SkipThisFixedPosition UrlGadgetsDiv" style="position: fixed; left: 0px; top: 34px !important; z-index: 2147483640; "> 
</div> 
    <div class="fixedDiv SkipThisFixedPosition GeneralGadgetsDiv" style="position: fixed; left: 0px; top: 34px !important; z-index: 2147483640; width: 100%; "> 
    </div> 
</div> 

<div id="footer"> 
</div> 

</body> 
</html>

出典

2012-02-12 Fahad Uddin