Question

I am creating an application using Instagram’s API, and a series of DIVs

Wrapper,
Image Container,
Image,
PopUp (hover)
user profile image
user name
date image was taken

I am hoping to have the Profile image, user name, and image displayed all on one line.

Here is a jsFiddle: http://jsfiddle.net/nAfxc/1/

Answer 1

You need to specify a width for your .instagram class.

See the jsFiddle here.
In this case, I just put 10,000px as an example; you might want to calculate the actual number. May be something like this:

function SetWidth() {

  var WidthOfSinglePic = $('.instagram-feed').width();
  var NumberOfPicsInFeed = $('.instagram').find('.instagram-feed').length;
  var WidthOfParentDiv = parseInt(WidthOfSinglePic  * NumberOfPicsInFeed, 10);

  $('.instagram').width(WidthOfParentDiv);
}

Edit: to remove the <br> tags, this would do the trick:

$('.igHoverContent').each(function () {

  var ContentHTML = $(this).html();

  var CleanContent = ContentHTML.find('br').each(function() {
      $(this).remove();
  }); 

  $(this).html(CleanContent);

});

Edit, after clarification:

$('.igHoverContent').each(function () {

   var ThumbnaiTopPosition = $(this).parent().find('igHover2').position().top;
   var ThumbnaiLeftPosition = $(this).parent().find('igHover2').position().left;
   var ThumbnailWidth = $(this).parent().find('img').width();

   var NewLeftPostion = ThumbnaiLeftPosition + ThumbnailWidth;

   $(this).css({
      'top': ThumbnaiTopPosition,
      'left': NewLeftPostion  
   });
});

Note: when you say “I am hoping to have the Profile image, user name, and image displayed all on one line.”, how is anyone supposed to guess that you really mean “I want to position each class .igHover next to class .igHoverProfPic“?

Final Edit: I just figured out there was something very wrong with the HTML you’re generating!!! You should remove the closing tag of this: <div class='igHoverContent' />\ so that the data is enclosed into the tag instead of being out of the tag!!!; and then just change your CSS to this:

.igHoverContent {
position: absolute;
margin: 275px 0px 0px 63px;}

See the final output here: http://jsfiddle.net/nAfxc/6/