Building Form Auto Size

This will auto size the entire surrounding #secondary div to the size specified, as well as the inner .hero divs and their images.

by Michael Perrenoud

HTML

<div id="output"></div>
<main id="content">
    <div class="wrap">
        <div id="main" role="main">
            <div class="inner-wrap">
                	<h1>Mission Statement</h1>

                <p>As your architect develops the vision of your project, the builder will have the important role of executing on that vision. You need a partner that can offer both expertise and time proven craftsmanship to minimize risk and ensure your project&#39;s success. We provide this service by:</p>
                <br/>
                <ul>
                    <li>Partnering with each client to identify concerns of construction issues prior to breaking ground.</li>
                    <li>Building strong, working relationships with architects, consultants and engineers.</li>
                    <li>Hiring and training a qualified workforce that is committed to building excellence.</li>
                    <li>Providing detailed project accounting to ensure client agreement.</li>
                    <li>Hiring leading subcontractors &amp; suppliers that meet our goals for quality and integrity.</li>
                    <li>Providing full-time site supervision.</li>
                </ul>
            </div>
        </div>
        <div id="secondary" role="complementary">
            <div class="hero">
                <img src="http://www.kazod.com/bch/a/img/reversecarpenter.jpg" alt="Sample hero." />
            </div>
        </div>
    </div>
</main>

CSS

#secondary {
    border: 1px solid red;
    padding: 1rem;
}
.hero img {
    border: 1px solid green;
}
#secondary > div {
    border: 1px solid blue;
}

JavaScript

var $output = $('#output');
var $images = $('.hero').find('img');
var $heroDivs = $('#secondary > div.hero');
var $nonHeroDivs = $('#secondary > div:not(.hero)');
var $secondaries = $('#secondary');
var $secondaryImages = $('#secondary > img');

var images = $images.length;
var heroDivs = $heroDivs.length;
var nonHeroDivs = $nonHeroDivs.length;
var secondaries = $secondaries.length;
var secondaryImages = $secondaryImages.length;

$output.append('<p>Images: ' + images + '</p>');
$output.append('<p>Divs: ' + heroDivs + '</p>');
$output.append('<p>Non Hero Divs: ' + nonHeroDivs + '</p>');
$output.append('<p>Secondaries: ' + secondaries + '</p>');
$output.append('<p>Secondary Images: ' + secondaryImages + '</p>');

var height = 250;
var divisor = 4;

if (nonHeroDivs > 0) {
    $secondaryImages.height((height / divisor) * (divisor - nonHeroDivs));
    $nonHeroDivs.height(height / divisor);
} else {
    $images.height(height);
}

$heroDivs.height(height);
$heroDivs.width($images.width());

$secondaries.height(height);
$secondaries.width($images.width() || $secondaryImages.width());