Menu
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 [URL=”http://i52.tinypic.com/f2ljwn.jpg”]http://i52.tinypic.com/f2ljwn.jpg
[CODE]
<body bgcolor=”#d5d5d5″>
<!–<div id=”wrap”>–>
<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><!–END LEFT–>
<!– InstanceBeginEditable name=”content” –>
<div id=”right”>
<!– Begin DWUser_EasyRotator –>
<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>
<!– End DWUser_EasyRotator –>
</div><!–END RIGHT–>
<!– InstanceEndEditable –>
<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><!–END NAV–>
</div><!–END CONTENT–>
<div id=”filler”>
</div><!–END FILLER–>
<!–</div><!–END WRAP–>
</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