htmlcsstwitter-bootstrapmarginpadding
How can I modify my four quadrants to allow some "breathing room" between them (HTML/CSS)?
I have been able to create four equi-sized/shaped quadrants on my page based on the accepted answer here.
So the page now looks like so:
I want to now give the quadrants some "elbow room" - some blank space around their edges. I tried adding margin to the classes they use:
.topleft {
background-color: blue;
margin: 4;
}
.topright {
background-color: red;
margin: 4;
}
.bottomleft {
background-color: green;
margin: 4;
}
.bottomright {
background-color: yellow;
margin: 4;
}
That did nothing; I tried then adding padding:
.topleft {
background-color: blue;
padding: 4;
}
.topright {
background-color: red;
padding: 4;
}
.bottomleft {
background-color: green;
padding: 4;
}
.bottomright {
background-color: yellow;
padding: 4;
}
...and that also did nothing.
What do I need to do to keep the same 1/4 space for all, but effectively "squish" them a scosh by adding margin between them or padding around them?
Here is the entire html/css:
<!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 {
background-color: azure;
}
.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;
}
.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;
}
.contents{
height:50%;
width:100%;
}
redfont {
color: red;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
background-color: blue;
padding: 4;
}
.topright {
background-color: red;
padding: 4;
}
.bottomleft {
background-color: green;
padding: 4;
}
.bottomright {
background-color: yellow;
padding: 4;
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6 topleft">
<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 topright">
<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>
<div class="row">
<div class="col-md-6 bottomleft">
<h2>Forecasted Spend</h2>
<table>
<tr>
<th>Item</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>Item 1</td>
<td>52</td>
<td>TWP 1</td>
<td>68.00</td>
</tr>
<tr>
<td>Item 2</td>
<td>49</td>
<td>TWP 2</td>
<td>65.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>46</td>
<td>TWP 3</td>
<td>63.00</td>
</tr>
<tr>
<td>Item 4</td>
<td>42</td>
<td>TWP 4</td>
<td>60.00</td>
</tr>
<tr>
<td>Item 5</td>
<td>40</td>
<td>TWP 5</td>
<td>58.00</td>
</tr>
<tr>
<td>Item 6</td>
<td>42</td>
<td>TWP 6</td>
<td>60.00</td>
</tr>
<tr>
<td>Item 7</td>
<td>43</td>
<td>TWP 7</td>
<td>61.00</td>
</tr>
<tr>
<td>Item 8</td>
<td>43</td>
<td>TWP 8</td>
<td>61.00</td>
</tr>
<tr>
<td>TOTAL</td>
<td>314</td>
<td></td>
<td>$496.00</td>
</tr>
</table>
</div>
<div class="col-md-6 bottomright">
<h2>Fill Rate</h2>
<table>
<tr>
<th>Unit</th>
<th>Co. Name</th>
<th>Desc</th>
<th>Ord</th>
<th>Ship</th>
<th>Var</th>
</tr>
<tr>
<td>Unit 1</td>
<td>Co. Name 1</td>
<td>Desc 1</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 2</td>
<td>Co. Name 2</td>
<td>Desc 2</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 3</td>
<td>Co. Name 3</td>
<td>Desc 3</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 4</td>
<td>Co. Name 4</td>
<td>Desc 4</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 5</td>
<td>Co. Name 5</td>
<td>Desc 5</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 6</td>
<td>Co. Name 6</td>
<td>Desc 6</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 7</td>
<td>Co. Name 7</td>
<td>Desc 7</td>
<td>40</td>
<td>39</td>
<td>1</td>
</tr>
<tr>
<td>Unit 8</td>
<td>Co. Name 8</td>
<td>Desc 8</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>TOTAL</td>
<td></td>
<td></td>
<td>280</td>
<td>279</td>
<td>1</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
UPDATE
Adding padding just has the appearance of bloating the quadrants, not providing any breathing room between them. It looks more or less as if a "top" property was assigned to the first element, pushing it further down.
Adding margin (16px) causes the quadrants to line up vertically on the page - all on the left, nothing on the right. The four pieces are stacked vertically, each one atop the next.
Solution
Don't add new classes to the divs containing the bootstrap column classes. Instead, create a child div and apply your styles to the inner div.
For example: Replace
<div class="row">
<div class="col-md-6 topleft">
...
</div>
</div>
with
<div class="row">
<div class="col-md-6">
<div class="topleft">
...
</div>
</div>
</div>
This way you're controlling the overall boundary of the container in the outer div and styling it (adding margins, padding) in the inner div.
Also, use px/em units for padding/margin as others suggested.
Codepen: http://codepen.io/anon/pen/vKQwyg
- How do I add a default text to the beginning of an html text area?
- ES2015 import doesn't work (even at top-level) in Firefox
- Can I force a page break in HTML printing?
- Why HTML <button type="submit" >doesn't work with internet explorer?
- CSS Is Not Importing into HTML
- Set the default value of an input field
- How to force background image to stretch/compress to fit div, without keeping aspect ratio
- How to render raw html in the PyHTML library
- HTML CSS Layout breaks with parent of floated elements
- How does the "position: sticky;" property work?
- Content Security Policy error - violating directive: script-src 'self'
- Navigation arrows are not showing
- Fixing Border Radius in Safari?
- How to show the date picker if I click the parent div after explictly hiding the date type input in React?
- Array of data showing in console but not in HTML after passing it through dialog in Angular project
- Puppeteer.page.waitForSelector timeouts, even though the element is present
- How can I allow document.domain on a sandboxed iframe?
- problems with my button background color and hover and active states
- Ignore html tags in preg_replace
- Append element as sibling after element?
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- How do I auto scroll in Angular?
- Button click not showing/hiding content
- Will browser pull from cache if the same resource is being requested by a different origin?
- filter file upload for only text files
- Correct XPath query to fetch div inner text
- How to select(highlight) and copy ordered list numbers
- Why javascript is not loading for document.readyState==="complete"
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile