fancybox v2.x

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<a class="fancybox" href="#inline">open inline</a>

<br />
<br />
<div id="inline" class="cf">
    <div id="content">
         <h3>Lorem Ipsum</h3>
        <p>More text content etc</p>
    </div>
    <div id="red">Other floating content</div>
</div>

CSS

* {
    margin:0;
    padding:0;
}
body {
    font-family: sans-serif;
}
.cf:after {
    visibility:hidden;
    display:block;
    content:"";
    clear:both;
    height:0
}
* html .cf {
    zoom:1
}
/* IE6 */
 *:first-child+html .cf {
    zoom:1
}
/* IE7 */
 #inline {
    position: relative;
    font-size: 14px;
    white-space: nowrap;
}
#content {
    width: 15.526em; /* 217.367px */
    height: 150px;
    display: block;
    background-color: #e2f2ea;
    float: left;
}
#red {
    width: 300px;
    height: 150px;
    background-color: #880000;
    color: #fff;
    display: block;
    float: left;
}

JavaScript

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        padding: 0,
        afterLoad: function () {
            // get the computed width of elements inside fancybox
            var totalWidth = 0;
            $("#inline").find("div").each(function (i) {
                // increment total width with each element's width
                totalWidth += parseFloat(
                window.getComputedStyle(this)
                    .getPropertyValue("width")
                    .split("px")[0]);
            });
            // compare if the result has a remainder
            if (totalWidth % 1 != 0) {
                totalWidth++; // increment total width by 1px
                // set the new fancybox width
                $.extend(this, {
                    fitToView: false, // cause will set a fixed width
                    autoWidth: false,
                    width: totalWidth
                });
            }
        },
        afterClose: function () {
            $("#inline").show(); // debuggin purposes only
        }
    });
}); // ready