layout 3 columns and 2 columns height does not match - html

Question

screenshot
Image size is 100% width.
Trying to make two columns and three columns below.
Fourth and fifth column height does not match the column height.
padding-right 5px must also apply.
a,b,c = image size (224x224)
d = image size (448x224)
e = image size (224x224)
How can I do this?
<div id="box-wrapper">
<div class="box-banner">
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
</div>
<div class="box-banner-two">
<div class="box-button-two"><img src="/448x224/random/ffffff"></div>
<div class="box-button-two"><img src="/224/random/ffffff"></div>
</div>
</div>
#box-wrapper {
padding-top: 10px !important;
padding-left: 5px !important;
padding-right: 5px !important;
height: 100%;
position: relative;
float: left;
}
.box-banner,
.box-banner-two {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.box-button {
float: left;
width: 32.444%;
margin: 0 5px 5px 0;
}
.box-button img,
.box-button-two img {
width: 100%;
}
.box-banner .box-button:nth-child(3) {
margin-right: 0px;
float: right !important;
}
.box-banner-two .box-button-two:nth-child(1) {
float: left;
width: 64.888%;
margin: 0 5px 5px 0;
}
.box-banner-two .box-button-two:nth-child(2) {
float: right;
width:32.444%;
margin: 0 5px 5px 0;
margin: 0;
}

Answer 1

I modified the html and css posted by you to achieve the same effect. I hope this helps.
Try to avoid important as much as possible.
*, *:after {
box-sizing: border-box;
}
a {
display: block;
text-decoration: none;
background-color: burlywood;
height: 224px;
text-align: center;
line-height: 224px;
}
#box-wrapper {
padding: 10px 5px 0 5px;
height: 100%;
position: relative;
}
.clearfix:after {
display: table;
clear: both;
content: '';
}
.box-button {
float: left;
width: 33.333%;
padding: 0 5px 5px 0;
}
.col-2 {
width: 66.666%;
}
<div id="box-wrapper">
<div class="box-banner clearfix">
<div class="box-button">
A Link
</div>
<div class="box-button">
A Link
</div>
<div class="box-button">
A Link
</div>
</div>
<div class="box-banner clearfix">
<div class="box-button col-2">
A Link
</div>
<div class="box-button">
A Link
</div>
</div>
</div>

Answer 2

Your are over complicating stuff with margin and paddings. The secret here is using box-sizing: border-box. Understand it better here
Apply the box-sizing to the .banner and its childrens
.banner {
box-sizing: border-box;
}
.banner * {
box-sizing: inherit;
}
Also apply to the img the width and padding you need
.banner img {
width: 100%;
}
.banner > * {
padding: 5px;
}
To better help you on layout add col- classes to each img parent
.col1-3 {
width: 33.333%;
}
.col2-3 {
width: 66.666%;
}
The html:
<div class="banner cf">
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
</div>
<div class="banner cf">
<div class="col2-3"><img src="http://www.amnh.org/var/ezflow_site/storage/images/media/amnh/images/learn-teach/program-images/teacher-programs-images-folder/data-viz-images-folder/data-viz-webinar-image-3/655567-3-eng-US/data-viz-webinar-image-3_imagelarge.jpg" /></div>
<div class="col1-3"><img src="http://www.okcourtsidehoops.com/okcourtsidehoops/wp-content/uploads/2013/04/images-21.jpg" /></div>
</div>
A working example:
http://codepen.io/sandrina-p/pen/PGQKrQ

Answer 3

try this..
#box-wrapper {
padding-top: 10px !important;
padding-left: 5px !important;
padding-right: 5px !important;
height: 100%;
position: relative;
}
.box-banner,
.box-banner-two {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.box-button {
float: left;
width: 32.444%;
margin: 0 5px 5px 0;
}
.box-button img,
.box-button-two img {
width: 100%;
}
.box-banner .box-button:nth-child(3) {
float: right !important;
}
.box-banner-two .box-button-two:nth-child(1) {
float: left;
width: 64.888%;
margin: 0 5px 5px 0;
}
.box-banner-two .box-button-two:nth-child(2) {
float: right;
width:32.444%;
margin: 0 5px 5px 0;
margin: 0;
}
<div id="box-wrapper">
<div class="box-banner">
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
<div class="box-button"><img src="/224/random/ffffff"></div>
</div>
<div class="box-banner-two">
<div class="box-button-two"><img src="/448x224/random/ffffff"></div>
<div class="box-button-two"><img src="/224/random/ffffff"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>