Dynamic Height Panels

Dynamic height panels in header.

by stichoza

HTML

<div id="header-wrap">
    <div id="container">
        <div class="feat-block f1">
            <span class="title">Information</span>
            <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</span>
            <span class="date">DD.MM.YYYY</span>
            <span class="link">See more &raquo;</span>
        </div>
        <div class="feat-block f2">
            <span class="title">New Data</span>
            <img src="http://placehold.it/140x60" alt="" />
            <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
            <span class="date">DD.MM.YYYY</span>
            <span class="link">See more &raquo;</span>
        </div>
        <div class="feat-block f3">
            <span class="title">Images</span>
            <span class="text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
            <span class="date">DD.MM.YYYY</span>
            <span class="link">See more &raquo;</span>
        </div>
    </div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
    outline: 0px;
    font-family: Georgia;
}
#header-wrap {
    width: 100%;
    background: #456;
}
#container {
    width: 600px;
    height: 280px;
    margin: 0px auto;
    position: relative;
}
.feat-block {
    width: 200px;
    height: auto !important;
    position: absolute;
    bottom: 0px;
    overflow: hidden;
}
.f1 { background-color: #ccc; left: 0px; height: 160px; }
.f2 { background-color: #aaa; left: 200px; height: 220px;  }
.f3 { background-color: #888; left: 400px; }

.feat-block .title {
    float: left;
    font-size: 18px;
    font-weight: bold;
    margin: 8px 0px 4px 8px;
    color: #333;
    /* -------- */ border: 1px solid red;
}
.feat-block .text {
    float: left;
    clear: left;
    font-size: 14px;
    margin: 4px 8px;
    padding-bottom: 20px;
    text-align: justify;
    color: #333;
    height: 100%;
    overflow: hidden;
    /* -------- */ border: 1px solid orange;
}
.feat-block .date {
    position: absolute;
    left: 5px;
    bottom: 5px;
    font-size: 11px;
    color: #333;
    background-color: inherit;
    /* -------- */ border: 1px solid lime;
}
.feat-block .link {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 11px;
    color: #333;
    background-color: inherit;
    /* -------- */ border: 1px solid blue;
}
.feat-block img {
    width: 94%;
    margin: 3px 6px;
    clear: both;
    /* -------- */ border: 1px solid pink;
}

JavaScript

$(".feat-block").hide();


$(".f1").fadeIn();
$(".f2").delay(100).fadeIn();
$(".f3").delay(200).fadeIn();