I read a lot of posts about this problem, but none of them help in solving my problem. I want the nav_bar on the side of the page to stop right on the footer (exactly where the div content ends.) Sorry, I'm not very good at javascript / jQuery. Ha
Here is my navigator code:
<div id="section"> <div id="navbar"> <div id="navbar_contents"> <ul> <li><a href="#"><img src="images/nav_bar/nav_top.jpg" width="107" height="55" alt="top"></a></li> <li><a href="#"><img src="images/nav_bar/nav_portfolio.jpg" width="107" height="55" alt="portfolio"></a></li> <li><a href="#"><img src="images/nav_bar/nav_about.jpg" width="107" height="55" alt="about"></a></li> <li><a href="#"><img src="images/nav_bar/nav_contact.jpg" width="107" height="55" alt="contact"></a></li> <li><a href="#"><img src="images/nav_bar/nav_resume.jpg" width="107" height="55" alt="resume"></a></li> </ul> </div> </div> <div id="content"> <h1>THE TOP</h1> <div id="clear"> </div> </div> </div>
and CSS:
#section #navbar { background-color: #FFF; height: auto; width: auto; border: 1px solid #000; float: left; -moz-box-shadow: 0px 0px 25px 2px #000000; -webkit-box-shadow: 0px 0px 25px 2px #000000; box-shadow: 0px 0px 25px 2px #000000; -webkit-border-radius: 8px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius: 8px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px; border-radius: 8px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding-right: 23px; position: fixed; } #section #navbar #navbar_contents { width: auto; height: auto; } #section #navbar ul { list-style-type: none; } #section #content { background-color: #FFF; height: 2000px; width: 610px; border: 1px solid #000; float: left; margin-left: 200px; -moz-box-shadow: 0px 0px 25px 2px #000000; -webkit-box-shadow: 0px 0px 25px 2px #000000; box-shadow: 0px 0px 25px 2px #000000; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-bottom: 20px; padding-left: 40px; padding-top: 30px; }
Thank you so much for your help!
source share