Quadrant

by Somenath Sinha

HTML

<div class="contents">
<div id="one" class="col-md-6 quarter" style="background-color:blue;">
<h2>Top 10 Items Purchased</h2>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
        </div>

        <table>
            <tr>
                <th>Item Code</th>
                <th>Description</th>
                <th>Qty</th>
            </tr>

            <tr>
                <td>Item Code 1</td>
                <td>Description 1</td>
                <td>Qty 1</td>
            </tr>
                . . .
            <tr>
                <td>Item Code 10</td>
                <td>Description 10</td>
                <td>Qty 10</td>
            </tr>
        </table>
</div>

<div id="two" class="col-md-6 quarter" style="background-color:red;">
<h2>Pricing Exceptions - Weekly Recap</h2>
<h3 class="redfont">Red denotes Contract Item Overages</h3>
<h3>For Weyand on the pricing week of - 7/31/2016</h3>
        <table>
            <tr>
                <th>Invoice No</th>
                <th>Invoice Date</th>
                <th>Customer</th>
                <th>Cust #</th>
                <th>Item Code</th>
                <th>Description</th>
                <th>Member Item Code</th>
                <th>Member Description</th>
                <th>Bid Price</th>
                <th>Sell Price</th>
                <th>Qty</th>
            </tr>

            <tr>
                <td>Inv No 1</td>
                <td>Inv Date 1</td>
                <td>Customer 1</td>
                <td>Cust # 1</td>
                <td>Item Code 1</td>
                <td>Descrip. 1</td>
                <td>M.I. Code 1</td>
                <td>Memb Desc 1</td>
                <td>Bid Price 1</td>
                <td>Sell Pr. 1</td>
             ...

CSS

body {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: white;
}
.body-content {
    -webkit-box-shadow: -1px 0 5px 0 #000000;
    -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
    box-shadow: -1px 0 5px 0 #000000;
    box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
   padding-left: 1px;
   padding-right: 1px;
   padding-bottom: 15px;
}
.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  color: inherit;
  background-color: white;
}
.bottommarginbreathingroom {
    margin-bottom: 2px;
}
.marginaboveandbelow {
    margin-top: 15px;
    margin-bottom: 15px;
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
.quarter{
  width:47.8vw;
  height:50vh;
  overflow: scroll;
}
.contents{
  height:50%;
  width:100%;
}

#one {
  float:left;
}

#two {
  float: right;
}

#three {
  float:left;
  clear:left;
}

#four {
  float:right;
  clear:right;
}