Navigation Menu Position

I have a navigation menu under my content on my page (non-scrolling page) but for some reason it is floating around 30px under my content instead of flush with the bottom of my content where it needs to be. The problem is demonstrated here http://i52.tinypic.com/f2ljwn.jpg. How can I fix this?

Code:

<body bgcolor="#d5d5d5">  <div id="content"> <div id="left"> <a href="http://www.theregencyguesthouse.co.uk"><img src="images/logo.png" alt="The Regency Guset House" width="316" height="61" border="0" align="absmiddle" style="margin-top:80%; margin-left:-10%;" /></a> </div>  <div id="right">  <script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script> <div class="dwuserEasyRotator" style="width: 100%; height: 100%; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-84-104-111-109-97-115-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47'}" data-ername="regencyguesthouse"> <div data-ertype="content" style="display: none;"> <ul data-erlabel="Main Category"> <li> <img class="main" src="images/DSC_0484.JPG" /> <img class="thumb" src="images/DSC_0484.JPG" /> </li> <li> <img class="main" src="images/DSC_0473.JPG" /> <img class="thumb" src="images/DSC_0473.JPG" /> </li> <li> <img class="main" src="images/DSC_0421.JPG" /> <img class="thumb" src="images/DSC_0421.JPG" /> </li> <li> <img class="main" src="images/DSC_0419.JPG" /> <img class="thumb" src="images/DSC_0419.JPG" /> </li> </ul> </div> <div data-ertype="layout" data-ertemplatename="NONE" style=""> <div class="erimgMain" style="position: position; left:0;right:0;top:0;bottom:0;" data-erconfig="{__numTiles:3, scaleMode:'scaleUpAndDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}"> <div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;"> <div class="erimgMain_slide"> <div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div> </div> </div> <div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div> <div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erconfig="{image:'circleSmall', image2:'circleSmall'}"></div> </div> <div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br /> <br /> Need a powerful <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">Flash slideshow</a> creator with built-in iPhone/iPad/Android support? EasyRotator is supported by the <a style="color:#FFF;" href="http://www.dwuser.com/flashslideshow/" target="_blank">XML Flash Slideshow v4 Software</a>. <br /> <br /> <a style="color:#FFF;" href="#" class="erabout_ok">OK</a> </div> <noscript> Powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy <a href="http://www.dwuser.com/easyrotator/">jQuery slider</a> builder from DWUser.com. </noscript> </div> </div>  </div>  <br class="clearFloat" /> <div id="nav"> <div class="navMenu"> <ul> <li id="currentpg"><a href="index.html">Home</a> <ul> <li></li> <li></li> </ul> </li> </ul> </div> <div class="navMenu"> <ul> <li><a href="about.html">About</a> <ul> <li></li> <li></li> </ul> </li> </ul> </div> <div class="navMenu"> <ul> <li><a href="gallery.html">Gallery</a> <ul> <li></li> <li></li> </ul> </li> </ul> </div> <div class="navMenu"> <ul> <li><a href="videos.html">Booking</a> <ul> <li></li> <li></li> </ul> </li> </ul> </div> <div class="navMenu"> <ul> <li><a href="contact.html">Contact</a> <ul> <li></li> <li></li> </ul> </li> </ul> </div> <div class="navMenu"> <ul> <li> <ul> <li></li> <li></li> </ul> </li> </ul> </div> <br class="clearFloat" /> </div> </div> <div id="filler"> </div>  </body>

Code:

@charset "utf-8"; /* CSS Document */ html, body { height:100%; overflow:hidden; } * { margin:0; padding:0; } #content { background-color:#ffffff; width:1000px; height:550px; margin-left:auto; margin-right:auto; margin-top:-10px; border:60px solid #000000; } #left { width:30%; float:left; border-right:1px dotted #333; padding-left:10px; padding-right:10px; margin-bottom:20px; height:100%; } #right { width:65%; float:right; padding-left:10px; padding-right:10px; margin-bottom:20px; height:100%; font-family:Georgia, "Times New Roman", Times, serif; } #filler { background-color:#000; height:10000px; margin-left:auto; margin-right:auto; width:1000px; border:60px solid #000000; } h1 { font-family:Georgia, "Times New Roman", Times, serif; color:#0B0B0B; margin-top:20px; } p { font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; margin-top:20px; margin-left:4px; margin-right:20px; margin-bottom:30px; } a { color:#333; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; } a:hover { color:#CCC; text-decoration:underline; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; } a:active { text-decoration:underline; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; } /*********************************NAVIGATION****************************************/ .navMenu { margin-top:20px; margin-left:0px; margin-right:60px; margin-bottom:20px; padding:0; } .navMenu ul { margin:0; padding:0; line-height:100%; } .navMenu li { padding:0; list-style:none; float:left; position:relative; background-color:#FF0000; margin-right:5px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } #currentpg { background-color:#AA0000; } #currentpg a { color:#FFFFFF; } .navMenu ul li a { text-align:center; font-family:Tahoma, Geneva, sans-serif; font-size:9px; font-weight:bold; text-decoration:none; width:60px; height:100%; display:block; color:#FFFFFF; } .navMenu a:hover { top:0px; color:#FFFFFF; text-decoration:none; background-color:#AA0000; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .clearFloat { clear:both; margin:0; padding:0; }

Thanks
Thomas

Code:

.navMenu { margin-top:20px; margin-left:0px; margin-right:60px; margin-bottom:20px; padding:0; }

Looks to be the issue

Still not working...

I have changed .navMenu to

.navMenu {
margin:0;
padding:0;
}

but, although the gap is now less, there is still a gap :(

Any ideas?

Thanks
Thomas

The causes: The clear float line-break, the #left and #right margin-bottom.

The solution: Remove the #left and #right margin-bottom's and change the .navMenu margin to '-10px 0 0'.

Thanks

Thanks, that sorted the problem. Unfortunately now I have changed all my measurements from percentages to pixels the menu has disappeared altogether. If you have any ideas then the new thread is here http://webdeveloper.com/forum/showth...76#post1167076

Thanks
Thomas