HTML elements moving on resizing browser

Issue

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>
            <a href="home.html"><img id="bukkiticon" src="images\Logo\bukkit.png"></a>
            <a id="twitter" alt="Twitter" href="https://twitter.com/" target="_blank"> +Twitter</a>
            <a href="https://www.twitter.com/"><img id="twittericon" src="images\Logo\twitter.png"></a>
            <a id="youtube" alt="YouTube" href="https://www.youtube.com/" target="_blank"> +YouTube</a>
            <a href="https://www.youtube.com/"><img id="yticon" src="images\Logo\youtube.png"></a>
            <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.

Solution

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.

Answered By - aorfevre