Splitter

3px actual height, 1 px visual height

by HugeHugh

HTML

<div class="holder">
    <div class="top">
    </div>
    <div class="splitter">
        <div class="grip"></div>
    </div>
    <div class="header">
        People
    </div>
    <div class="list">
    </div>
    <div class="splitter">
        <div class="grip"></div>
    </div>
    <div class="header">
        Rooms
    </div>
    <div class="list">
    </div>
</div>

CSS

body, html {
    height: 100%;
    font-size: 85%;
    font-family: sans-serif;
}
.holder {
    background-color: white;
    height: 100%;
    width: 200px;
    margin-left: 50px;
    border: 1px solid #ddd;
}
.top, .list {
    height: 50px;
}
.header {
    height: 20px;
    line-height: 20px;
    background-color: #eee;
    padding-left: 8px;
}
.splitter {
    height: 3px;
    cursor: ns-resize;
    position: relative;
}
.grip {
    position: relative;
    top:1px;
    height: 1px;
    border-top:1px solid #ddd;
    background-color: #eee;
    pointer-events: none;
}
.splitter:hover .grip {
    border-color: #666;
}