Why is my register link not working?

Question

For some reason my register link won't work within my header, any help would be appreciated.

code (in header):

<header>
    <img src="PSE.jpg" height="100" width="250" alt="Logo" /> 
    <div id="search"><input type="text" name="query" class="query" id="query" value="Search..." autocomplete="off">
    <input class="button" type="submit" name="submit" value="Go"></div>
    <div id="login">Login</div>
    <div id="register"><a href="register.html">Register</a></div>       
    <form id="user"><input type="text" name="Username" value="Username"/>
    <input type="password" name="Password" value="password"/></form>        
    <div id="facebook"><a><img src="facebook-icon.png" height="25" width="25" alt="facebook"/></a></div>
    <div id="twitter"><a><img src="twitter-icon.jpg" height="25" width="25" alt="twitter"/></a></div>
    <div id="youtube"><a><img src="youtube-icon.png" height="25" width="25" alt="youtube"/></a></div>
</header>

css:

header{
    margin: 0 auto;
    width: 100%;
    height: 110px;
    text-align: left;
    display: block;
    background-color:#268ACC;
    }

    header img{
    text-align:left;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    }       
    #search {
    text-align: left;
    position: relative;
    left: 300px;
    bottom: 40px;
    }
    #user{
    text-align: left;
    position: relative;
    left: 550px;
    bottom: 60px;
    }
    #login{
    text-align: left;
    position: relative;
    bottom: 40px;
    left: 550px;
    margin-top:-50px;
    }
    #register{
    text-align: left;
    position: relative;
    bottom: 65px;
    left: 710px;        
    }
    #register a{
    list-style-type: none;
    margin: 0px;
    text-decoration: none;
    vertical-align: middle; 
    }   
    #facebook{
    text-align: right;
    position: relative;
    bottom: 160px;
    padding-right: 5px;
    }
    #twitter{
    text-align: right;
    position: relative;
    bottom: 160px;
    padding-right: 5px;
    }
    #youtube{
    text-align: right;
    position: relative;
    bottom: 160px;
    padding-right: 5px;

edit: now added all header elements and css. Just to add some detail because it wants me to, the layout of the header in an image on the left hand side followed by a search bar then login inputs, social media image and the register link which i am trying to fix.

Answer 1

Becuase of the relative positioning, the div is being overlapped. So just add a z-index with a high number like 9999 to your relative positioned div like this:

#register{
    text-align: left;
    position: relative;
    bottom: -20px;
    left: 100px;
    z-index: 9999;        
}

And it should work beautifully.

Answer 2

You forgot to set the width and height of div.

Try this:

#register{
  text-align: left;
  position: relative;
  width: 100%;
  height: 80px;
}
#register a{
  list-style-type: none;
  margin: 0px;
  text-decoration: none;
  vertical-align: middle;
}