[HELP] Element Alignment Problem in CSS

Today I received a feedback email from visitor of my funny pictures site.. he mentioned that the button of fb-digg-retweet are appearing at pic.. im using css code to put that sharing button.. I made this site for 1024x768 resolution but today I saw in Google analytics that most of visitor are having more resolution than 1024x768. When I increase resolution the button are mis placed
im using this code

to control alignment of button.. now tell me what do I do.. I dont want to remove these buttons
here is the screen shot of resolution of visitors

 

What I can see from your site is that the share-post-icons are fixed to a specified length from the left, irrespective of the screen resolution, whereas, what is intended is that the "icons" should be right-aligned.

1. If you dont want to touch the code, just add the following script at the end of your body in the html

<script>
	sharePostPaddingRight = 25;
	jQuery(".sharepost").css("left", (window.innerWidth - jQuery(".sharepost").outerWidth(true) - sharePostPaddingRight) + "px");
</script>

Code (markup):

and in case you want a better solution, try this

2. wrap your div.sharepost inside a div.sharepost-wrapper,
so that your html looks like this:

<div class="sharepost-wrapper">

	<div class="sharepost">

		<div class="sharer">...</div>

		<div class="sharer">...</div>

		<div class="sharer">...</div>

	</div>

</div>

Code (markup):

and replace the style definition in your source codes for .sharepost with the following

<style type="text/css">

.sharepost-wrapper {
	position: fixed;
	width: 100%;
	top: 250px;
}
	
.sharepost {
	position: static
	margin: 0;
	margin-right: 10px;
	float: right;
	border:1px solid #E8E8E8;
	width: 60px; 
}


</style>

Code (markup):

Also I thought you might be interested in
http://tagsoup.com/cookbook/css/fixed/
http://www.howtocreate.co.uk/fixedPosition.html

 

Thanks dude, its working really helpful

 

I tried the javascript method too. its not working.. and with the css wrapper there is a problem.. the whole area at the left of of button becomes unclickable .. link are not working there and even cant select text/ pic etc
what do I do

 

    <style type="text/css">

    .sharepost-wrapper {
    	position: fixed;
    	top: 250px;
    	right: 0;
    }
    	
    .sharepost {
    	position: static
    	margin: 0;
    	margin-right: 10px;
    	border:1px solid #E8E8E8;
    	width: 60px; 
    }


    </style>

Code (markup):