Position

What am I missing? I added social media icons on the bottom right of this page, however, they move every time the browser is re-sized. How do I make it so that they stay in place (and don’t move)?

Hi Karen,
They are moving around because you have AP’d the div and set it at right:500px; I suspect that right positioning made it LOOK right on your system until you reduced your viewport but on smaller monitors it would have looked totally different.

Your footer1 is a fluid width and it sits outside of your fixed width container. The icons were just following the viewport.

Your footer2 div has a fixed width and is centered with auto margins.

You can float the icons div right and they will stop when your horizontal scrollbar kicks in. Other than that you would need to set a min-width on footer1.

The top margin below was just to push it down in the lower portion of the footer.

.footer-decoration  {
    float:right;
    width:145px;
    height:26px;
    margin-top:40px;
}

I tried your CSS for .footer-decoration and it shows up in the very right bottom of the screen. How do I put it exactly where I had it and make it stay and not move?

first: you have a typo:
.footer-decoration{z-index::2;}

Do you mean you want them to always be in the viewport? if so what you need is “position:fixed;” it works like position absolute but relative to the view port, ( this means , that they WONT SCROLL tho)

If you want them to stay centered ( and above the footer menu) which I what I logically would conclude you want. I would NOT give #footer-decoration AP as this takes it out of the flow of the document… since all your links are inline images , you can now center them by adding the rule text-align:center; to .footer-decoration.

hope that helps!

I can live with this - where the icons are in the light pink area but way to the right:
.footer-decoration {
float:right;
width:145px;
height:26px;
margin-top:-15px;
}

but I would prefer the icons to be lined up underneath the right border of site where I had them originally w/o resizing browser. Does that make sense?

Here’s a screenshot: http://www.studio33jewelry.com/images/capture.gif.

but I would prefer the icons to be lined up underneath the right border of site where I had them originally w/o resizing browser. Does that make sense?
Like I had said, your footer1 is a fluid width and that is why they are moving around.

Your footer2 is not wide enough (it’s only 400px or so). I would make footer2 the same width as your container above (930px) and then nest your icons in it too. That will put it directly under your right border when you float it right. Then you can drag it up or down with margins

Your html will look like this, then we can get the CSS tuned up afterwards:


<div id="footer1">
    <div id="footer2">
        <div class="footer-decoration">
            <a href="http://www.facebook.com/pages/Waynesville-NC/Studio33/116046248420638?v=wall" target="_blank"><img src="images/facebook.png" width="25" height="25" class="social" alt="Find us on Facebook" /></a>
            <a href="https://twitter.com/#!/studio33earth" target="_blank"><img src="images/twitter.png" width="25" height="25" class="social" alt="Connect with us on Twitter" /></a>
            <a href="http://www.linkedin.com/pub/diannah-beauregard/7/2b6/b2" target="_blank"><img src="images/linkedin.png" width="25" height="25" class="social" alt="Connect with us on Linkedin" /></a>
            <a href="https://studio33diannah.wordpress.com/" target="_blank"><img src="images/wordpress.png" width="28" height="25" class="last" alt="Follow our Blog" /></a>
        </div>
        <ul>
            <li><a href="home.html">Home</a>|</li>
            <li><a href="https://studio33diannah.wordpress.com" target="_blank">Blog</a>|</li>
            <li><a href="studioearth/index.html">Studio Earth</a>|</li>
            <li><a href="mailto:diannah.studio33@gmail.com">Contact</a></li>
        </ul>
        <p class="copyright">&copy; 2007-2010 &#8226; Studio Thirty Three &#8226; All Right Reserved.<br />
        33 Pigeon St. Waynesville NC 28786 &#8226; Phone:(828) 456-3443</p>
        <span class="finePrint">design by:  <a href="http://www.creativestudio3.com" target="_blank">CreativeStudio3</a>
        </span>
    </div>
</div>

Got it Ray. Realized the solution when I woke up :-). Also realized I think I like it on the outer edge of the viewport so will keep it there for now. Thanks for all your help!