bNPbwE

bNPbwE.markdown

bNPbwE

A Pen by Captain Anonymous on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">

<div class='container'>
    <div class='row-fluid header-row'>
      <div class='span12'>
        <h1>Comparable Filters</h1>
      </div>
    </div>
    <div class='row-fluid'>
      <div class='span3'>
        <div class='section'>
          <label>
            <input type='checkbox'> Comparable Sales
          </label>
          <select>
            <option selected>All</option>
          </select>
        </div>
        
        <div class='section'>
          <label>
            <input type='checkbox'> Include Sales Within
          </label>
          <select>
            <option selected>5 Miles</option>
          </select>
        </div>  
        
         <div class='section'>
          <label>Minimum # Compare Sales</label>
          <select>
            <option selected>3 Comps</option>
          </select>
          <label>Maximum # Compare Sales</label>
          <select>
            <option selected>10 Comps</option>
          </select>
        </div>  
      </div>
      
      <div class='span3'>
        <div class='section'>
          <label>Year Built</label>
          <label>
            Subject: <span>1921</span>
          </label>
          <label>
            From: <input type='text' /> 
          </label>
          <label>
            To: <input type='text' /> 
          </label>
        </div>
        
        <div class='section'>
          <label>As Of Date</label>
          <select>
            <option>Current Date</option>
          </select>
          <input type='text' value='03/20/2015' />
          <label>Recording Date</label>
          <select>
            <option>1 Year</option>
          </select>
           <label>From</label>
           <input type='text' value='03/20/2015' />
           <label>To</label>
           <input type='text' value='03/20/2015' />
        </div>
      </div>
      
      <div class='span3'>
        <div class='section'>
          <label>Price</label>
          
          <label>
            <span>max</span>
            <input type='text' placeholder='no min'/>
          </label>
          
          <label>to</label>
          
          <label>
            <span>max</span>
            <input type='text' placeholder='no max'/>
           </label>
        </div>
      </div>
      
      <div class='span3'>
      </div>
    </div>
</div>

style.css

.container { width: 90% !important; margin-bottom: 5px; }
.header-row { border-bottom: #666 solid 4px; margin-bottom: 5px; }
.header-row h1 { padding: 0; margin: 0; }
.section { 
  padding: 2px 2px 2px 25px;
  border-top: 1px solid #ddd;
}
.section:first-child { border-top: none; }
.section:last-child { border-bottom: none; }

.row-fluid { overflow: hidden; }
.span3 { 
  border-right: 1px solid #ddd; 
  margin-bottom: -99999px; 
  padding-bottom: 99999px; 
  margin-left: 0 !important;
  width: 25% !important;
}
.section label { margin-left: -12px }