How to place icons in a specific place?

[JCKnoell]

I am trying to get our social media icons to stay in place, no matter how zoomed in or out you are (ctrl+scroll). We have clients with varying monitor sizes, technologies, browsers, etc. The website is www.cleantelligent.com Currently our icons are floated and aligned right, so no matter how you look at it, they line up with the right side of the screen. How do I get them to "stick" right under the "get started" button, no matter where you look? There's a lot of CSS formatting on this page that deals with the slider right below and I don't want to displace or mess anything else up. Is there any way to get them to stay right under the button while in their own div, span, aside, or whatever? The code is as follows:Quote:<div id="main"> <div id="primary" class="showcase"> <div id="content" role="main"> <article id="post-89" class="post-89 page type-page status-publish hentry intro"><header class="entry-header"><h2 class="entry-title">Home</h2> </header><!-- .entry-header --> <div class="entry-content"><!--SOCIAL MEDIA ICONS--><div style="align: right; float: right; padding-right: 50px;" id="first" class="widget-area" role="complementary"><aside id="text-2" class="widget widget_text"><div class="textwidget"><div class='footer_social_icons'><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div></div><!--END OF SOCIAL MEDIA ICONS--> <div class='slider' id='slider-1'><div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div><img src="/wp-content/uploads/2012/02/clean-slide-1.jpg" alt="Slide 1" /><div class='slide-desc'><h2>Productivity</h2>We believe technology is not only for automation, but for empowerment. <a class="alignright" title="Productivity" href="/about-us/janitorial-service-software/efficiency-in-the-workplace/">Meet and Exceed Expectations</a> </div></div>

Edited June 26, 2013 by JCKnoell

[newseed]

Just right below your 'entry-content' div I would do it like this: <div class="entry-content"><div style="width: 960px; margin: 0 auto; position: relative; right: 0; top: 0;"><div style=" margin: 0 auto;position: absolute; right: 0; top: 13px;"><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div> And if you do want to use positioning then you can use float: <div class="entry-content"><div style="width: 960px; margin: 0 auto;"><div style=" margin: 13px auto 0; float: right;"><a href="http://www.facebook.com/CleanTelligent"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/facebook.png" /></a><a href="http://www.linkedin.com/company/cleantelligent_software"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/linkedin.png" /></a><a href="https://twitter.com/#!/CleanTelligent1"target="_blank" ><img src="/wp-content/themes/cleantelligent/images/twitter.png" /></a><a href="/news-and-events/rss.xml" ><img src='/wp-content/uploads/2012/05/Blog-button.png' ></a></div></div>

Edited June 26, 2013 by newseed

[Ingolme]

Personally, I would set a min-width to the topmost container of the page. This will prevent things from vertically stacking when they shouldn't. Make the min-width as wide as the actual page content. There also seems to be a problem on your page that when the screen is too small, some of the header content is out of view, setting min-width would also fix that.