getting position of a div or <li> to set the position of a image

[friedice]

is there a way to get left position and right position of a div and set it to an image css to always be aligned to it?

the div itself which is a set of <li>s always changes depending how wide the screen

with 24inch resolution , there are 5 column in which the li takes and its near the edge of the screen

however in 15inch resolution there is only 3 columns and there is a much larger space on the sides

im tryin to get the logo at the top of the page to always be matched with the right and left sides of the columns

 

i tried using javascript for it like .position() and .offset() and all but it doesnt seem to work ;/

thanks

 

 

[Adam]

This should be done with CSS. JavaScript should never be used to control the position of a static element. Do you have an example online we can look at? Or perhaps able to give us some mark-up to recreate it?

[friedice]

<div id="main">
<div id ="scroller">
	<div class="maincontent" id="maincontent">

	<!-- database connection -->

	<script>
	$(document).ready(function(){ 
  // Alert the position with jQuery
  var position = $("#tiles").position();
  alert('left: ' + position.left + ", top: " + position.top );
  });
  </script>


	<ul id="tiles">
        <!-- grid thumbnails -->

        <li data-large="images/tumblr_images/i1.jpg">
		<div class="box" >
			<img src="images/tumblr_images/i1.jpg"/>
			<p class="imgcontent">Just chilling.
			</p>
				<script>
					var p = document.getElementById(?maincontent?).innerHTML;
					var pos = $("maincontent").position();
					$("pos").text( "left: " + position.left + ", top: " + position.top );
				</script>				
		</div>

		<!-- like incrementer -->
		<!--
		<div class="content">
		<p><a href="#" onclick="doaction('<?php echo $postid;?>','like');"> Like(<span id="<?php echo $postid;?>_likes"><?php echo $data->like;?></span>)</a>
	</p>	
		</div>-->
	</li>


        <li data-large="images/tumblr_images/i2.jpg">
		<div class="box">
			<img src="images/tumblr_images/i2.jpg"/>
			<p class="imgcontent">Babe.</p>				

		</div>
	</li>
</div>
</div>
</div>

this is part of the page

 

#main {
margin:0px 0 0 0;
max-width:1903px;
min-width:980px;
position:relative;
z-index:0;


}
#scroller {
margin-top:1px;

}

.maincontent{
position:relative;
margin-top:-300px;
margin-left:0px;
left:0;
top:0;
}

 

 

i might add that it calls this function to set the tiles on the page

  <script type="text/javascript">
    $(document).ready(new function() {
	$('#tiles').pinterestGallery({
		largeContainerID: 'largeImage',
		animateStyle: 'twirl',			
		gridOptions: {
	        autoResize: true, 
	        container: $('#main'), 
	        offset: 12, 
	        itemWidth: 300			
		}
	});
    });
  </script>