Nib Column - Expanders

Nib Column - Expanders

by Chris Buttery

HTML

<div class="list">
<div class="list-item odd">List Item 1</div>
<div class="list-item active">List Item 5
    <div class="dropdown">Dropdown</div>
</div>
<div class="list-item odd">List Item 2</div>
<div class="list-item">List Item 6</div>
<div class="list-item odd">List Item 3
<div class="dropdown">Dropdown</div>
</div>
<div class="list-item">List Item 7</div>
<div class="list-item odd">List Item 4</div>
<div class="list-item">List Item 8</div>
</div>

CSS

.list {
    width: 400px;
    height: 200px;
}

.list-item {
    float: right;     
    width: 200px;
}

.list-item.odd {
    clear: both;
    float: left;
}

.active .dropdown {
    
    margin-left: -200px;
}

.dropdown {
    height: 200px;
    width: 400px;
    background: #000;
    clear: both;
}