How can I get the quadrants on my page to vertically stretch to match the height of their horizontal neighbor?
I want four equi-sized quadrants on my page - all should be the same width and height, with some space between them.
What I'm getting as of now is this:
What I want is that the top right quadrant ("Pricing Exceptions") stretch vertically, as if being pulled toward the bottom, so that its bottom border lines up horizontally with the top left ("Top 10 Items Purchased") quadrant.
I want similar for the two bottom quadrants, namely that the "Forecasted Spend" quadrant be "pulled down" or "stretched" so that it aligns horizontally wit the taller "Fill Rate" quadrant.
How can I accomplish that?
My code (this is a mockup - all the html and css are combined in one .html file) is as follows:
<!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>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
label {
font-family: Candara, Calibri, Cambria, Georgia, serif;
}
.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;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
margin-top: -4px;
}
.bottommarginbreathingroom {
margin-bottom: 4px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: georgias, 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;
}
.contents{
height:50%;
width:100%;
}
.redfont {
color: red;
}
.bold {
font-weight: bold;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border:1px solid black;
}
.topright {
margin-top: 16px;
margin-right: 16px;
margin-bottom: 16px;
margin-left: -12px;
padding: 16px;
border:1px solid black;
}
.bottomleft {
margin-left: 16px;
padding: 16px;
border:1px solid black;
}
.bottomright {
margin-right: 16px;
margin-left: -12px;
padding: 16px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">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>100250</td>
<td>Artichokes Green Globe 18 Size</td>
<td>9084</td>
</tr>
<tr>
<td>102800</td>
<td>Broccoli Bunched 18 Size</td>
<td>8837</td>
</tr>
<tr>
<td>100050</td>
<td>Anise Fennell 12</td>
<td>6653</td>
</tr>
<tr>
<td>101600</td>
<td>Beans Blue Lake Round Hand Pick</td>
<td>5846</td>
</tr>
<tr>
<td>106000</td>
<td>Carrots Cello 48/1#</td>
<td>4266</td>
</tr>
<tr>
<td>108000</td>
<td>Celery Pascal 12</td>
<td>3774</td>
</tr>
<tr>
<td>105000</td>
<td>Cabbage Green 45-50#</td>
<td>3024</td>
</tr>
<tr>
<td>104000</td>
<td>Brussel Sprouts Cello Cups 12/12 oz</td>
<td>2663</td>
</tr>
<tr>
<td>100450</td>
<td>Asparagus Colossal 11/1#</td>
<td>2624</td>
</tr>
<tr>
<td>102350</td>
<td>Beets With Tops 24</td>
<td>2253</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="topright">
<h2 class="sectiontext">Pricing Exceptions - Weekly Recap</h2>
<label class="redfont">Red denotes Contract Item Overages</label>
</br>
<label>For Weyand on the pricing week of - 7/31/2016</label>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>231083</td>
<td>BERRIES, BLACK DRISC 1/6 OZ</td>
<td>0.00</td>
<td>4.35</td>
<td>1.00</td>
</tr>
<tr>
<td>104150</td>
<td>BRUSSEL SPROUTS, 25#</td>
<td>0.00</td>
<td>36.20</td>
<td>1.00</td>
</tr>
<tr>
<td>261650</td>
<td>LIMES, 200 CT 40#</td>
<td>0.00</td>
<td>18.65</td>
<td>2.00</td>
</tr>
<tr>
<td>140000</td>
<td>MUSHROOMS, BUTTON 10#</td>
<td>0.00</td>
<td>19.95</td>
<td>2.00</td>
</tr>
<tr>
<td>398980</td>
<td>MELONS, CANTALOUPE CHUNKS 2/5#</td>
<td>38.30</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>398280</td>
<td>MELONS, HONEYDEW CHUNKS 2/5#</td>
<td>37.30</td>
<td>34.50</td>
<td>15.00</td>
</tr>
<tr>
<td>398036</td>
<td>PINEAPPLE, CHUNKS 2/5#</td>
<td>37.70</td>
<td>35.00</td>
<td>10.00</td>
</tr>
<tr>
<td>351135</td>
<td>LETTUCE, SALAD 3-WAY SEP BAG 1/5#</td>
<td>6.46</td>
<td>6.01</td>
<td>2.00</td>
</tr>
<tr>
<td>208110</td>
<td>APPLES, GALA 12 CT</td>
<td>0.00</td>
<td>8.04</td>
<td>1.00</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="bottomleft">
<h2 class="sectiontext">Forecasted Spend</h2>
<table>
<tr>
<th>Item Code</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>261650</td>
<td>49</td>
<td>3.14</td>
<td>153.86</td>
</tr>
<tr>
<td>231083</td>
<td>52</td>
<td>1.25</td>
<td>65.00</td>
</tr>
<tr>
<td>398980</td>
<td>46</td>
<td>4.95</td>
<td>227.70</td>
</tr>
<tr>
<td>351135</td>
<td>40</td>
<td>0.75</td>
<td>30.00</td>
</tr>
<tr>
<td>398036</td>
<td>42</td>
<td>3.00</td>
<td>126.00</td>
</tr>
<tr>
<td>208110</td>
<td>42</td>
<td>2.50</td>
<td>105.00</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td class="bold">271</td>
<td class="bold">--</td>
<td class="bold">$707.56</td>
</tr>
</table>
</div>
</div>
<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Fill Rate</h2>
<table>
<tr>
<th>Company Name</th>
<th>Reason Description</th>
<th>Ordered</th>
<th>Shipped</th>
<th>Rate %</th>
</tr>
<tr>
<td>ABUELOS #A11 - PEORIA</td>
<td>Regular Item, no issues</td>
<td>622</td>
<td>622</td>
<td>100</td>
</tr>
<tr>
<td>ABUELOS #A09 - EAST PLANO</td>
<td>Regular Item, no issues</td>
<td>371</td>
<td>375</td>
<td>101</td>
</tr>
<tr>
<td>ABUELOS #A26 - MYRTLE BEACH</td>
<td>Credit - Product Quality (for credit adjustments only)</td>
<td>19</td>
<td>9</td>
<td>47</td>
</tr>
<tr>
<td>ABUELOS #A38 - LAKELAND</td>
<td>Regular Item, no issues</td>
<td>569</td>
<td>569</td>
<td>100</td>
</tr>
<tr>
<td class="bold">TOTAL</td>
<td></td>
<td class="bold">1581</td>
<td class="bold">1575</td>
<td class="bold">99.6</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Solution
If you aren't creating dynamic sized containers then you can set the height like so:
.topright, .topleft {
height: 400px;
}
This will keep them even.
- Animate toggle height from 0 to auto or 100%
- How does the "position: sticky;" property work?
- Disabling android's chrome pull-down-to-refresh feature
- Placing national flags at start of sentence
- Clear-Site-Data "*" : Different behavior in both Firefox and Chrome
- How to programmatically Download a file from Google Drive, using Javascript and HTML? (NOT Google Drive API)
- Add CSS3 transition expand/collapse
- Remove content of p tag
- Email formatting basics (links in plain text emails)
- css file won't load when opening my website
- Should I use the .htm or .html file extension? Which one is correct?
- Can't figure out why element's height is not what I set it to
- How to submit form only once after multiple clicking on submit?
- Remove whitespace from SVG
- Why does CSS ::part override JavaScript element.style?
- Remove "content" CSS property "onclick" button for the entire website
- ReactJS - .JS vs .JSX
- Markdown no break (nobr)?
- Not able to trim displayed value in Dropdown
- Transition between routes in react-router-dom v6.3
- Show div even if empty
- some code i don't understand well in jquery
- Make Search Box closes if user clicks anywhere?
- How to handle required fields in display:"none"
- How to make a DIV visible and invisible with JavaScript?
- Blinking animation
- formvalidation.io external submit button
- webpage templates vs building from scratch
- How to add static text inside an input form
- Google Chrome Developer tools shows browser default font size as 18 pixels?