Why does this element have its size equal to 0px x 0px when it is positioned using 'relative'?

Question

I used this plugin to annotate a JavaScript image to add annotations to the project - I managed to get it to work correctly on an empty web page with only this HTML:

<div id="sample-image"> <img src="img.jpg"></img> </div> 

And this CSS for annotations:

 .circle { border-radius: 50%/50%; width: 20px; height: 20px; background: black; } 

This gives the correct result ...

However, when I went to add this to another project using Twitter Boostrap and this HTML

 <div class="container-fluid"> <div class="row-fluid"> <div data-spy="affix" data-offset-top="200" class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <div style="float:right" class="span9"> <div id="sample-image"> <img src="img.jpg"></img> </div> </div> ... 

Elements are located at the top of the page because by default they have a position: property aboslute:

 <a class="circle" data-toggle="tooltip" data-placement="top" data-original-title="Church" rel="tooltip" onmouseover="$(this).tooltip('show')" style="left: 406px; top: 247px; position: absolute;"></a> 

Change of this position: relative forces them to be placed correctly, but their size is set to 0px x 0px according to Chrome, so they are not displayed.

Any ideas why this could be?

Thanks Jake

Answer 1

float can sometimes lead to the destruction of containment objects. Have you tried using "display: inline-block" instead? http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/