Problem in Layout

Hi I am beginner in html and css coding, i have made a html page using css and jquery for scrolling images, the outer layout using 'div' in which other div resides, some how the footer or any other divs that I use after the scrolling image, bounces off from the main outer div.

Here is d Image:http://s10.postimage.org/wsvqksjeh/Untitled.png

Please Help:(
Please tell me how to fix this?

html code:

HTML Code:

<body> <div id="page"> <div id="topbar"><h1>Scrolling Images</h1></div>  <div id="menubar"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a class="MenuBarItemSubmenu" href="#">Item 1</a> <ul> <li><a href="#">Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a class="MenuBarItemSubmenu" href="#">Item 3nnhgh</a> <ul> <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul> <li><a href="#">Item 3.1.1</a></li> <li><a href="#">Item 3.1.2</a></li> </ul> </li> <li><a href="#">Item 3.2</a></li> <li><a href="#">Item 3.3</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Untitled Item</a></li> <li><a href="#">Untitled Item</a></li> <li><a href="#">Untitled Item</a></li> </ul> </div>   <div id="top"> <div class="controller" id="right"></div> <div id="slider"> <img id="1" src="images/1.jpg" width="625" height="417" /> <img id="2" src="images/2.jpg" width="625" height="417" /> <img id="3" src="images/3.jpg" width="625" height="417" /> <img id="4" src="images/5.jpg" width="625" height="417" /> </div> <div class="controller" id="left"></div> </div>  <div id="offers"> </div> <div id="footer"> <h3></h3> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body>

css:

Code:

body { background-color: #e1e1e1; margin:0 auto; text-shadow:#666; } #right { background-image: url(images/rss.png); padding-right: 10px; padding-left: 10px; } #page { background-color: #CCC; margin:0 auto; width: 960px; } #inside{ background-color: #CCC; width: 960px; } #topbar{ margin:0 auto; width:900px; height:50px; background: rgb(169,3,41); /* Old browsers */ background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(188,19,3,1) 47%, rgba(211,0,59,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(47%,rgba(188,19,3,1)), color-stop(100%,rgba(211,0,59,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(188,19,3,1) 47%,rgba(211,0,59,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#d3003b',GradientType=0 ); /* IE6-9 */ border-bottom-right-radius:15px; border-bottom-left-radius:15px; box-shadow:3px 3px 7px #990033; padding-top:1px; padding-left:30px; padding-bottom:15px; } #menubar{ width:900px; height:17px;; margin:0 auto; margin-top:20px; padding-bottom:20px; border-radius:15px; padding-left:15px; background: rgb(191,210,85); /* Old browsers */ background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */ box-shadow:#360 3px 3px 7px; } #top { overflow: auto; margin:30px auto; width:800px; border:1px #666 solid; border-radius:15px; box-shadow:#999 3px 3px 7px; } .controller { background-image: url(images/presscoders.png); background-repeat: no-repeat; background-position: center; height: 417px; width: 52px; float: left; /* [disabled]padding:30px; */ } #left { padding-right: 10px; padding-left: 10px; float:left; } #right { padding-left:30px;float:left; } #slider { height: 417px; width: 625px; float: left; overflow: hidden; } body,td,th { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; color: #FFFFFF; } #footer{ float:left; width:800px; height:50px; margin-top:30px; padding:30px; text-align:center; clear:both; border-top-left-radius:15px; border-top-right-radius:15px; border: 1px solid #999; border: inset 1.5px solid #333; color:#FFF; }

If "bounces off" means "big space between", the issue is that id=top has 30 pixels in margin-bottom and id=footer has 30 pixels in margin-top which creates a 60 pixel buffer between them.

I don't have any of the images that your page uses, so my local test looks drastically different... but to fix the issue as I described it:
in #top, change:
margin:30px auto;
to:
margin-top:30px;

in #footer remove:
margin-top:30px;

Thanks Mr.nap0leon
It Helped a bit, but I want that all the other divs should reside inside div id=page,

when I insert other divs inside div=page, it resides outside the div id=page,
i want all the other div to stay inside it..

Please Help..:confused:

add overflow:auto to #page