B. Clay Shannon B. Clay Shannon - 3 months ago 17
CSS Question

How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

I need to create a "dashboard" mockup that displays four equi-sized squares. The following key html and css is what I'm using in an attempt to accomplish this:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<style>
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:50%;
height:100%;
float:left;
}
.contents{
height:50%;
width:100%;
}
</style>
</head>

<body>
<div class="contents">
<div 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 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>
<td>Qty 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>Inv Date 2</td>
<td>Customer 2</td>
<td>Cust # 2</td>
<td>Item Code 2</td>
<td>Descrip. 2</td>
<td>M.I. Code 2</td>
<td>Memb Desc 2</td>
<td>Bid Price 2</td>
<td>Sell Pr. 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>Inv Date 3</td>
<td>Customer 3</td>
<td>Cust # 3</td>
<td>Item Code 3</td>
<td>Descrip. 3</td>
<td>M.I. Code 3</td>
<td>Memb Desc 3</td>
<td>Bid Price 3</td>
<td>Sell Pr. 3</td>
<td>Qty 3</td>
</tr>
</table>
</div>

<div class="col-md-6 quarter" style="background-color:yellow;">
<h2>Forecasted Spend</h2>
</div>

<div class="col-md-6 quarter" style="background-color:green;">
<h2>Fill Rate</h2>
</div>
</body>
</html>


I'm currently coloring the quadrants gaudily to easily see where one ends and another begins. As you can see below, the quadrants intrude on each other, rather than each taking no more and no less than 25% of the space:

enter image description here

How can I force the quadrants to align with each other so that each one takes up exactly 1/4 of the space in their shared space? IOW, the green and yellow quadrants ("Fill Rate" and "Forecasted Spend") need to align so that they are on the same "row"/are the same distance from the top.

For "full disclosure," here is the entire .hmtl file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
}
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
.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;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
}
.bottommarginbreathingroom {
margin-bottom: 2px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
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:50%;
height:100%;
float:left;
}
.contents{
height:50%;
width:100%;
}
redfont {
color: red;
}
</style>
</head>

<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 0.6cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.2cm;">eServices Reporting</label>
<br/>
<label class="titletextjr" style="margin-top: -2.2cm;">Customer Dashboard</label>
</div>
</div>

<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>

<div class="contents">
<div 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 2</td>
<td>Description 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Item Code 3</td>
<td>Description 3</td>
<td>Qty 3</td>
</tr>
<tr>
<td>Item Code 4</td>
<td>Description 4</td>
<td>Qty 4</td>
</tr>
<tr>
<td>Item Code 5</td>
<td>Description 5</td>
<td>Qty 5</td>
</tr>
<tr>
<td>Item Code 6</td>
<td>Description 6</td>
<td>Qty 6</td>
</tr>
<tr>
<td>Item Code 7</td>
<td>Description 7</td>
<td>Qty 7</td>
</tr>
<tr>
<td>Item Code 8</td>
<td>Description 8</td>
<td>Qty 8</td>
</tr>
<tr>
<td>Item Code 9</td>
<td>Description 9</td>
<td>Qty 9</td>
</tr>
<tr>
<td>Item Code 10</td>
<td>Description 10</td>
<td>Qty 10</td>
</tr>
</table>
</div>

<div 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>
<td>Qty 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>Inv Date 2</td>
<td>Customer 2</td>
<td>Cust # 2</td>
<td>Item Code 2</td>
<td>Descrip. 2</td>
<td>M.I. Code 2</td>
<td>Memb Desc 2</td>
<td>Bid Price 2</td>
<td>Sell Pr. 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>Inv Date 3</td>
<td>Customer 3</td>
<td>Cust # 3</td>
<td>Item Code 3</td>
<td>Descrip. 3</td>
<td>M.I. Code 3</td>
<td>Memb Desc 3</td>
<td>Bid Price 3</td>
<td>Sell Pr. 3</td>
<td>Qty 3</td>
</tr>
</table>
</div>

<div class="col-md-6 quarter" style="background-color:yellow;">
<h2>Forecasted Spend</h2>
</div>

<div class="col-md-6 quarter" style="background-color:green;">
<h2>Fill Rate</h2>
</div>
</body>
</html>

Answer

Since you're using Bootstrap, just utilize their grid system.

Looks like you've attempted it here:

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

But instead of leaving that empty, move your 4 tables/quadrants into the grid scope, something like:

<div class="contents">
    <div class="row">
        <div class="col-md-6">{quad 1}</div>
        <div class="col-md-6">{quad 2}</div>
    </div>
    <div class="row">
        <div class="col-md-6">{quad 3}</div>
        <div class="col-md-6">{quad 4}</div>
    </div>
</div>

Make sure you wrap the columns with the .row class, like the Boostrap doc examples.

Comments