I am working on a website. I have made the header and the footer but its very weird that the footer is getting displayed just after the header. I have other div’s in between but I am unable to understand why isn’t it displaying after them.
Please have a look. Thankyou.
<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>
Specify a height for your #div but DON’T use percentage! This won’t work in every browser and the % way disparate…