Question: Basically I have to find out how old someone is in months, years and days. I have worked out the days and years but not the months as there're leap years and some months are different in length.

### Here is my code

```
//Variables 
    var now = new Date();
    var totalDays = '';
    var totalMonths = '';
    var totalWeeks;
    var birthDate = new Date(document.getElementById('selYear').value, document.getElementById('selMonth').value, document.getElementById('selDay').value);
    var output = '';

//Total Days Old
var totalDays = Math.floor((now - birthDate) / 86400000);

//Total Weeks Old
totalWeeks = totalDays / 7;
totalWeeks = Math.round(totalWeeks);

//Total Months Old 
totalMonths = totalDays / 30;

//Total Years 
var totalYears = document.getElementById('selYear').value - now.getFullYear();
totalYears = Math.abs(totalYears);

//Outputs
output += 'You are ' + totalDays + ' days old';
output += '<br />You are ' + totalWeeks + ' weeks old';
output += '<br />You are ' + totalMonths + ' months old';
output += '<br />You are ' + totalYears + ' Years old';

```

### I've thought of using if statements or a for loop and i've searched all of google and I can't find a way!

I have an application that asks the user for day, month and year. I have tested my current code (***totalMonths = totalDays / 30***) and it will get close to the ***totalMonths*** that it's suppose to be (I have checked an online site) and the date [1/1/1990] will fetch 302 while it should fetch ***297 months***

Answer: 
You could add a wrapper `<div>` inside the column to contain the `<img>` and the absolutely positioned `<div>`. So that the overlay would respect to the *content-box* of the column rather than the *padding-box*.

```css
.overlay-container { position: relative; display: inline-block; }

.overlay {
  visibility: hidden;
  opacity: 0;

  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 1.2rem;

  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.overlay-container:hover .overlay {
  visibility: visible;
  opacity: 1;
}
```

```html
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
<div class="row">
  <div class="large-4 columns">

    <div class="overlay-container">
      <img src="http://lorempixel.com/400/200" />
      <div class="overlay">Overlay text</div>
    </div>

  </div>
</div>
```
So I have missed one simple thing - putting one more div into columns solves this problem, because new div can be without padding, so it's 100% width, as for parent div, will be ok for info div also. This is the code:

```
<div class="row">
  <div class="large-4 columns"> 
    <div>
      <div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
      <img src=".." style="width:100%; height:100%">
    </div>
  </div>
</div>

```