Putting a div on the bottom of screen

Question

I add Google Adsense's ad to the bottom of my pages. Adsense creates an iframe inside my div and put its ad inside. (I changed iframe's src and added 1px border to demonstrate fiddle) I use this for smartphone and tablet users.

Fiddle: http://jsfiddle.net/mavent/Hpm6L/12/

<div id="mydiv" class="row my_center hidden-print" 
    style="position:fixed;bottom:0;left:0;right:0;/* height:50px; */
           border: 1px solid red;">
  <iframe id="aaaa" name="aaaa" width="320" height="50" frameborder="0"
     src="http://www.wsj.com" marginwidth="0" marginheight="0" vspace="0"
     hspace="0" allowtransparency="true" scrolling="no">
  </iframe>
</div>

.my_center {
    text-align:center;
}

When I create this, mydiv automatically has 55px height. In that case there exists a 5px gap just below the ad. If I set height:50px; problem solves but it creates another problem (I must check whether user has width bigger than 768px and serve him/her table versioned Google ad etc.)

So why this "5px" appears ? I can't see any border, bottom-margin etc ?
How can I stick this div to the bottom ?

Answer 1

Try this fiddle. set in your styles: line-height:0;

http://jsfiddle.net/Hpm6L/14/

HTML:

<div class="row my_center hidden-print" style="position:fixed;bottom:0;left:0;right:0;11height:50px;border: 1px solid red;line-height:0;">
            <iframe id="aaaa" name="aaaa" width="320" height="50" frameborder="0" src="http://www.wsj.com" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"></iframe></div>

CSS:

.my_center {
    text-align:center;
}