Browser Compatibility - cross-browser

Question

My code works fine in Chrome, however when I run it in Firefox, there is a problem. My webpage has 2 roman style columns ( each column consists of 2 images, a top and a bottom )that run vertically from the bottom of the header to the top of the footer. But in Firefox they stop about 30px from the top of the footer, leaving a gap.
My code does not include any vender prefixer's, but when I ran my CSS through Autoprefixer.com it did not add any either. Here is the code that seems to be affected.
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="685" width="60">
</div>
<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="685" width="60">
</div>
/*Roman Columns*/
#col_topleft {position: absolute;
top: 220px;
left: 25px;
}
#col_topright {position: absolute;
top: 220px;
right: 25px;
}
#col_bottleft {position: absolute;
top: 640px;
left: 25px;
}
#col_bottright {position: absolute;
top: 640px;
right: 25px;
}

Answer 1

This should fix the problem.
First add a div with position:relative than drop your content inside that div
<div style="position:relative;">
<div style="position:absolute"> <!-- your content div -->
</div>
</div>