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


Tags: html,css,twitter-bootstrap

Problem :

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>


Solution :

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.


    CSS Howto..

    How to select 3rd div which has specific css class

    How to move nagivation bar to more to the right to fit a logo left of the bar

    How to get all images(overlapping allowed) in one line using css?

    How to make label inside div to be in the same position as lower ones

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    Added ellipsis for long text but it showing below the text

    How to Customize jCountdown timer which is using css sprite resources to become auto Responsive?

    hovering over list item, only one item showing up instead of all

    How to fix misaligned rows alt the last records, after using vertical scroll and frozen column?

    How to undo CSS change after clicking on another link

    Showcase Image and Carousel Caption

    How can i overlay an 10x10px image on top of another image?

    how to give css for arranging label, textbox and text area side by side in the same line

    How to override mixins in LESS CSS 1.4+

    how do i change a div background when you hover over a button in another div?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    How to make JS & CSS inline work for eBay template?

    css: how to have a variable column size with text overflow ellipsis

    How to make content fill space inside
    tag in html?

    How do you work on your HTML and CSS in PLay! + intellij idea? [closed]

    How to hide a segment of my website using PHP

    how to vertically align footer contents with css

    How to target multiple table rows with a single CSS rule?

    How to trigger CSS “hover state” using Javascript? [duplicate]

    How to make information appear only when hovered over using jquery and css?

    HTML/CSS: How to make the sidebar and content follow each other

    How to minify HTML with CSS and Javascript? [closed]

    How do you programmatically apply a css class to an asp.net control?

    How to position CSS fixed JQuery dropdown bar

    How to use SASS logic within a CSS 3 media query [duplicate]