htmlcsstwitter-bootstrapalignmentstretching
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.
- HTML saving to PDF loses anchor tags
- Listen on multiple input tags and concatenate inputs to a single output field without need to click a button
- In Emacs, how to add line number for src block by CSS?
- React.js passing one components variables to another component and vice-versa
- React Audio Player Change current time of Audio
- Changing the color of a <select> depending on its value - CSS only(?)
- How to submit an HTML form without redirection
- HTML/JS app within an Android App
- How to get only directly contained text in DOM element in Javascript?
- Remove leading zeros from input type=number
- Progress bar along the borders of a rectangle
- Is there a way to change the CSS resize corner's position?
- Disable zoom on input focus in Android webpage
- Converting old Html SIZE=+x to css
- How to style focus outline for accessibility purposes
- How to set textarea height using min-height?
- Resize textarea on input
- Semantically correct html for react accordion component
- How can I tell password managers what pattern to use?
- Ticks for type="range" HTML input
- Why Marquee in HTML and CSS context is named that way?
- Undefined error after switching through images in Javascript
- HTML Input Font Family Styling for Safari
- Overflow text align left
- Should the <main> tag be inside <section> tag
- Audio is not playing in html
- How can I avoid recursion in this JavaScript function that uses Promises?
- If it is possible to animate image pixelation without canvas, using only CSS
- How to Link another page, at a certain point HTML
- How do I import svg from file to a component in angular 5?