twitter bootstrap affix resizes div element - html

Question

I am using twitter bootstrap , below is a certain portion of my code . Whenever the affix gets applied after scrolling down , the whole div resizes . What am i doing wrong ?
<div class="mythumb" data-spy="affix" data-offset-top="90">
<img src={$profimg_src} style="width:100%;" data-src="holder.js/300x200"/>
<div class="caption">
<h5>{$firstname}{$middlename}{$lastname}</h5>
</div>
<div class="btn-group">
<button class="btn" id="subscribe">Subscribe</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>Subscribe To All posts</li>
<li>Subscribe To Ideas Only</li>
<li>Subscribe To Posts Only</li>
</ul>
</div>
</div>

Answer 1

When using affix, the JS will add the class of affix to the div that its spying on once you have scrolled 90px (in this case).
When it does this it takes the div out of normal flow so you typically have to create a new style for the the affixed div.
Something like this is a start:
.mythumb.affix{
top:50px;
margin: 0 auto;
width:940px;
height:200px;
}
You might also have to specify z-index and position values. I don't know what your current page looks like, so the CSS above is just a guess. Once you understand that the root cause is because the affixed div has been taken out of normal flow, you can usually restyle it to suit your purpose.
Hope this helps!