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 get user submission to post to page

    How to execute select() method on polymer elements based on URL?

    How to remove the “Facebook social plugin” text?

    How do you set background-color rgba on the body with background-image also?

    How to activate jQuery function with img instead of button?

    CSS Fixed width right, fluid left, right div is first in html. How do I keep left from collapsing

    How to make css border shape [duplicate]

    How to add inset box-shadow to mapbox-div?

    twitter-bootstrap: how to get rid of underlined button text when hovering over a btn-group within an -tag?

    CSS: How can I have a
    within a expand the table horizontally?
    To answer your first question and to supplement LJ's answer: Here is the relevant part of the spec to explain why the table expands to contain the inner div and...
    Read more

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How do I keep an element from pushing another element in CSS?

    How to use vertical menus in HTML and css?

    How to move an element styled by CSS stylesheet?

    How do I create html/css elements in a shape of a circle?

    how to override min-width

    (HTML/CSS) How do I repeat items like on Google or Reddit?

    How to call apk font use CSS in android?

    How to make Css transition effect work on Safari and Chrome?

    How to dynamically change CSS class of DIV tag?

    how do i get css source file path from firebug?

    How can I make buttons flash different background colors when clicked/

    AJAX Call returns JSON, how to render properly formatted data

    How to draw a line with css and show text or image on it

    How to have background color outside of radius border in a tbody in chrome?

    How to change the color of first row of first table using css

    How to prevent the background image from getting blurry

    How do I get two adjacent spans to display their text vertically?

    How to Style Specific Element On Hover With CSS?

    How to create an ActionImage from a CSS Sprite