The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Relative Position and div

  • # January 9, 2010 at 10:15 am


    I am trying to move my navigation sidebar up over the header image, this works fine, using relative position, and a -330 top setting. However, it does not move up the whole div, leaving a large empty space below the div, where it would be without the -330 setting.


    The green area at the bottom is the empty space that I cannot remove.

    The site can be seen here:

    I am pretty sure the difficulty and solution lives in this css id

    #menu {
    float: left;
    position: relative;
    width: 250px;
    top: -330px;
    left: 5px;
    background-image: url(images-menu/Menu-Background.png);
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 20;
    margin: 0px;
    padding: 0px;

    I have played with changing the order of the header and menu divs, but get the same issue, except I have to move the header div up a bunch.

    Thank you in advance for any suggestions.


    # January 9, 2010 at 12:22 pm

    This reply has been reported for inappropriate content.

    In the #menu change margin: 0px to margin-bottom: -300px to remove the extra space.

    There are a few other errors that cause the site not to validate apart from the Flash which you might like to check.

    You have written <div id=footer> instead of <div id="footer">

    You also have an empty div tag just below this line:
    <a href="#"><img src="images-site/High-Performance-Homes.png" alt="High Performance Living" width="225" height="282" border="0" /></a>

    # January 9, 2010 at 3:02 pm

    Virtual, you nailed it. Looks great!

    Thank you for the quick response, and welcome to the community.

    I will work out the validation on Monday.

    Thanks again, mark

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed