HTML elements moving on resizing browser - html

Question

I have looked around at google and looked at another question: Page elements moving on window resize and I still cannot find the answer to this. My problem is that when I resize the browser my top div element where my navigation bar is moves messing up how the website looks. Since the CSS has it a certain amount to the right CSS probably updates how the page looks since I am resizing it. How would I keep the elements from moving upon page resizing?
My current code
<div id="top" style="background-image: url(images/Home/space.gif); height: 120px; width: 100%; border: 1px solid black;">
<a href="contact.html">
<img id="buttoncontact" alt="Contact" src="images\Logo\contact.png">
</a>
<a id="plugins" alt="Plugins" href="http://bukkit.org/" target="_blank"> +Bukkit</a>
<img id="bukkiticon" src="images\Logo\bukkit.png">
<a id="twitter" alt="Twitter" href="https://twitter.com/" target="_blank"> +Twitter</a>
<img id="twittericon" src="images\Logo\twitter.png">
<a id="youtube" alt="YouTube" href="https://www.youtube.com/" target="_blank"> +YouTube</a>
<img id="yticon" src="images\Logo\youtube.png">
<img id="td6img" src="images\Logo\TD6.png">
<nav id="navigation">
<a id="navigation-anchor-normal" href="contact.html">
<img src="images\Home\mars.png">
</a>
<a id="navigation-anchor-normal" href="projects.html">
<img src="images\Home\merc.png">
</a>
<a id="navigation-anchor-current" href="home.html">
<img src="images\Home\sun.png">
</a>
<a id="navigation-anchor-normal" href="lessons.html">
<img src="images\Home\nept.png">
</a>
<a id="navigation-anchor-normal" href="donate.html">
<img src="images\Home\jupiter.png">
</a>
</nav>
</div>
CSS
#top
{
background-image: url("images/Home/stars.png");
height: 95px;
border: 1px solid black;
width: 100%;
position: fixed;
top:0;
left:0;
background: rgba(255,255,255,1);
z-index: 100;
-webkit-box-shadow:0px 0px 20px rgba(44,44,44,.3);
}
#buttoncontact
{
float:left;
}
#yticon
{
position:absolute;
right:300px;
}
#youtube
{
text-decoration:none;
position:absolute;
right:225px;
color:red;
}
#twittericon
{
position:absolute;
right:190px;
}
#twitter
{
text-decoration:none;
position:absolute;
right:130px;
color:aqua;
}
#bukkiticon
{
position:absolute;
right:95px;
}
#plugins
{
text-decoration:none;
position:absolute;
right:35px;
color:#FF8000;
}
#navigation
{
text-align:center;
}
#navigation-anchor-normal
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
#navigation-anchor-current
{
text-decoration:none;
color:aqua;
display:inline-block;
padding:5px 8px;
}
The only element that is not moving is the TD6img above the nav. Everything else is moving when I resize the window.
What I want to accomplish is having these elements stay put upon resizing the window and not move with the resizing.
This is only happening to this div element no other div element that I have under it.

Answer 1

What you are trying to do is creating a responsive site.
I highly suggest you to use existing framework for that, and not trying to redo all by your self.
For that, look at twitter bootstrap that is the most robust and efficient jquery / javascript responsive design framework.

Answer 2

If you still want help with your task have a look at this DEMO Not sure if this is what you were looking for but play around with it if you want. Also you can upvote my answer when you get enough rep. I swithed most of your position:absolute to float:right

Answer 3

If you are looking for something easy to use and doesn't require a lot of changes, you can also use the "framework" from here: http://www.responsivegridsystem.com/
It is not too heavy and only gives you what you need to make a site responsive. I am using this for a company.
Twitter bootstrap in my opinion is good but it is heavy and although most classes doesn't get loaded, changing/modifying the code is very hectic.