Image container not aligning bottom to other grid container - html

Question

Hello,
As you can see from the photo above, I am trying to achieve a grid system. First grid is 3 images, second grid is a column, and third grid is a large image floated to the right of the 2nd grid. You can see this photo on my portfolio website: http://www.irwinlitvak.com
I have three images in the first grid that have a width of 31.33% and the first and second img have a margin-right of 3.005% to full up the container width.
In the next grid (grid-2), I have a two of my images floated left in a column and (grid-2-of-3) is floated right with a width of 65.556%.
I would like the top and bottom of the larger image to take up the full height of the grid, so the bottom of the big image aligns with the self-destructing box.
Here is the HTML & CSS:
.projects-grid {
margin: 100px auto 0;
width: 90%;
}
.projects-grid .title {
margin-bottom: 20px;
text-align: center;
}
.projects-grid h1 {
display: inline-block;
font-family: "Montserrat";
}
.grid-1 {
margin-bottom: 4%;
}
.grid-1-of-3 {
position: relative;
width: 31.33%;
float: left;
overflow: hidden;
}
.grid-2-of-3 {
position: relative;
width: 65.556%;
float: right;
}
.grid-1-of-3:first-child,
.grid-1-of-3:nth-child(2) {
margin-right: 3.005%;
}
.grid-3 {
position: relative;
display: inline-block;
width: 33%;
margin-bottom: 60px;
vertical-align: bottom;
}
.grid-5 {
position: relative;
display: inline-block;
width: 20%;
margin-bottom: 60px;
vertical-align: bottom;
}
.box-1 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-1-of-3:first-child {
margin-left: 0;
}
.grid-1-of-3:last-child {
margin-right: 0;
}
.big-box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.grid-2 {
width: 31.33%;
float: left;
}
.grid-2 .box-cont {
width: 100%;
}
.grid-2 .box-cont:first-child {
margin-bottom: 4%;
}
.grid-2 .box-cont {
position: relative;
}
<section class="projects-grid clearfix">
<div class="row title">
<h2>Projects</h2>
</div>
<div class="grid-1 clearfix">
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img class="bdgt-app" src="assets/budget-app-x-ps.jpg" alt="budget-app pic">
</a>
<a href="https://budget-app-x.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Budget-App-X</h3>
<p>Manage your incomes and expenses in a fun and easy app.</p>
</div>
</div>
</a>
</div>
<h3>
Budget-App-X
</h3>
</div>
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img src="/assets/dice-game-x-ps.jpg" alt="dice-game">
</a>
<a href="https://dice-game-x.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Dice-Game</h3>
<p>Roll the dice. Test your luck and see who racks the most points.</p>
</div>
</div>
</a>
</div>
<h3>
Dice-Game
</h3>
</div>
<div class="grid-1-of-3">
<div class="box-1">
<a href="">
<img src="/assets/pomodoro-timer-x-ps.jpg" alt="pomodoro-app-timer">
</a>
<a href="http://pomodoro-app-timer.herokuapp.com" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Pomodoro-Timer</h3>
<p>A quick and easy solution to being productive. Set the time and get things done.</p>
</div>
</div>
</a>
</div>
<h3>
Pomodoro-Timer
</h3>
</div>
</div>
<div class="grid-2 clearfix">
<div class="box-cont">
<div class="box-1">
<a href="">
<img src="/assets/cucumberme-x-ps.jpg" alt="cucumber me">
</a>
<a href="http://www.cucumberme.com" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>CucumberMe</h3>
<p>CucumberMe is your way of anonymously sending cucumbers to a friend, ex or anyone you want.<br><br> Go and send one today! </p>
</div>
</div>
</a>
</div>
<h3>
CucumberMe
</h3>
</div>
<div class="box-cont">
<div class="box-1">
<a href="#">
<img src="/assets/self-destruct-x-ps.jpg" alt="to do list">
</a>
<a href="http://todos-irwin.herokuapp.com/" target="_blank">
<div class="box-overlay">
<div class="text-overlay">
<h3>Self Destructing To-Do-List</h3>
<p>A to-do-list that will delete itself within 10 seconds. How many chores can you list within that time? </p>
</div>
</div>
</a>
</div>
<h3>
<a href="http://todos-irwin.herokuapp.com/" target="_blank">
Self Destructing To-Do-List
</a>
</h3>
</div>
</div>
<div class="grid-2-of-3 clearfix">
<div class="box-cont">
<div class="big-box">
<a href="#">
<img src="/assets/omnifood-x-ps.jpg" alt="omnifood">
</a>
<a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
<div class="box-overlay big-overlay">
<div class="text-overlay">
<h3>Omnifood</h3>
<p>My version of the food app Blue Apron. Take a look! </p>
</div>
</div>
</a>
</div>
<h3>
<a href="http://con.staging.thegateny.net/con/Omnifood/v1/" target="_blank">
Omnifood
</a>
</h3>
</div>
</div>
</section>

Answer 1

What you can do is as I show in the snippet below. You have a container for all your divs you want at the same height, which you give a set height. You then give the items on the left a container (with height: 100%) and make a div for the right item (height: 100%).
By doing this, you have a container for the items on the left, so you can make them, say, 50% each, and you have a right item that's the same height as the container on the left.
In order to make an image fit a div, either use background-size: cover or something similar. height:100%; width: auto also works for responsive images.
Hope it helps.
.outer {
background: blue;
width: 600px;
height: 200px;
}
.leftwrap {
width: 30%;
float: left;
height: 100%;
}
.left1 {
background: purple;
width: 100%;
height: 50%;
}
.left2 {
background: orange;
width: 100%;
height: 50%;
}
.right {
background: teal;
height: 100%;
width: 70%;
float: left;
}
/** New code **/
.image {
height: 80%;
width: auto;
border: 1px solid black;
}
.imagetext {
color: white;
text-align: center;
border: 1px solid black;
}
.left {
box-sizing: border-box;
padding-bottom: 30px;
}
<div class='outer'>
<div class='leftwrap'>
<div class='left left1'>
<div class="image">My image here</div>
<div class="imagetext">Some text</div>
</div>
<div class='left left2'>
<div class="image">My image here</div>
<div class="imagetext">Some text</div>
</div>
</div>
<div class='right'>3</div>
</div>