expanding container

div width expands to accomodate the width of contents

by David McClelland

HTML

<div id="mainContainer">
    <div id="assetTracker_Title" class="Title">Total Filtered Assets</div>
    <div id="TotalsCount" class="FlipContainer">
        <div class="flipChart GrayBox">0</div>
    </div>
    <div id="filterContainer">
        <div class="Title" id="filterContainerTitle">Apply Filters</div>
        <div id="CheckList">
            <div class="SelectItem green">
                <label class="ShowTypesLabel">
                    <input id="totalCountMapToggle" class="ShowTypes" name="ShowTypes" type="radio" value="all"
                           onchange="switchRadio(this)" checked/>
                    <img id="All" src="assets/images/assettracker-online.png?v=%%VERSION_TOKEN%%" width="27"
                         height="23">
                    <span id="onlineLabel"> Online Assets</span></label>
            </div>
            <div class="SelectItem red">
                <label class="ShowTypesLabel">
                    <input id="missingAssetsMapToggle" class="ShowTypes" name="ShowTypes" type="radio" value="missing"
                           onchange="switchRadio(this)"/>
                    <img id="Missing" src="assets/images/assettracker-missing.png?v=%%VERSION_TOKEN%%" width="28"
                         height="23">
                    <span id="missingLabel">Missing Assets</span></label>
            </div>
        </div>
    </div>
    <div id="searchContainer">
        <div id="filter" class="GrayBox">
            <input id="SelectFilter" onBlur="HideFilters()" class="FormField" onMouseDown="ShowFilters()" readonly/>

            <div class="Arrows" onMouseDown="ShowFilters()"></div>
            <ul id="AllFilters" data-template="ul-filters-template" data-bind="source: filters"
                style="display:none"></ul>
            <div id="allFiltersLabel" onMouseDown="ShowFilters()">Select Filter Type To Add</div>
            <div id="filterEntry">
                <div id="filterEntryChildren" style="width:100%;"...

CSS

#mainContainer {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
#filterContainer {
    position: absolute;
    height: 220px;
    top: 91px;
    left: 0px;
    width: 302px;
}
#searchContainer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 224px;
    width: 302px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#mapZoom {
    position: absolute;
    left: 348px;
    top: 24px;
    width: 37px;
    height: 211px;
    z-index: 20000;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    background-image: -webkit-linear-gradient(bottom, rgba(190, 190, 190, .4), rgba(255, 255, 255, .4));
    background-image: -moz-linear-gradient(bottom, rgba(190, 190, 190, .4), rgba(255, 255, 255, .4));
    background-image: -o-linear-gradient(bottom, rgba(190, 190, 190, .4), rgba(255, 255, 255, .4));
    background-image: -ms-linear-gradient(bottom, rgba(190, 190, 190, .4), rgba(255, 255, 255, .4));
    background-image: linear-gradient(to top, rgba(190, 190, 190, .4), rgba(255, 255, 255, .4));
    -webkit-border-radius: 10px 10px 10px 10px/10px;
    -moz-border-radius: 36px 36px 36px 36px/36px;
    border-radius: 18px;
    border: solid 1px #BEBEBE;
}
#mappingContainer {
    position: absolute;
    background-color: #EEE;
    left: 320px;
    right: 10px;
    top: 0px;
    bottom: 0px;
    border-color: #100;
}
#TotalsCount {
    position: absolute;
    width: 302px;
    top: 44px;
    left: 0px;
}
#allFiltersLabel {
    position: absolute;
    left: 22px;
    top: 19px;
    width:292px;
    z-index: 661;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}
#MapContainer {
    width: 100%;
    padding: 10px;
    background-color: #DDD;
    border-width: 1px;
    border-color: #111;
    border-style: solid;
   ...