Contact Form Auto Size

This will auto size the entire surrounding #secondary div to the size specified, any inner divs to the percentage of the divisor, and the image to the remaining. It will also set the width of the overall div to the width of the image so that the other divs fit properly on top of the image.

by Michael Perrenoud

HTML

<div id="output"></div>
<main id="content">
    <div class="wrap">
        <div id="main" role="main">
            	<h1>Contact</h1>

            <form>
                <fieldset>
                    <ol>
                        <li>
                            <label for="name">Name</label>
                            <input id="name" type="text" name="name" />
                        </li>
                        <li>
                            <label for="address">Address</label>
                            <input id="address" type="text" name="address" />
                        </li>
                        <li>
                            <label for="city">City</label>
                            <input id="city" type="text" name="city" />
                        </li>
                        <li>
                            <label for="home-phone">Home Phone</label>
                            <input id="home-phone" type="tel" name="home-phone" />
                        </li>
                        <li>
                            <label for="work-phone">Work Phone</label>
                            <input id="work-phone" type="tel" name="work-phone" />
                        </li>
                        <li>
                            <label for="email">Email</label>
                            <input id="email" type="email" name="email" />
                        </li>
                    </ol>
                </fieldset>
                <fieldset>
                    <ol>
                        <li>
                            <label for="how-did-you-hear">How did you hear of Behrens-Curry Homes?</label>
                            <input id="how-did-you-hear" type="text" name="how-did-you-hear" />
                        </li>
                        <li>
                            <label for="type-of-work">Type of work needed?</label>
                            <input id="type-of-work" type="text" name="type-of-work" />
                     ...

CSS

#secondary {
    border: 1px solid red;
    padding: 1rem;
}

.hero img {
    border: 1px solid green;
    padding: 1rem;
}

#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());