I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements ends up taking less space than the other, resulting in white space at the bottom of the smaller div.
Is there a way to eliminate this unnecessary whitespace?
Below is the HTML and CSS I am using:
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top;
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 100px;
}<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> <a href="index.html"> The Novel Column </a> </h1>
<ul>
<li> <a href="#"> Resources </a>
<ul>
<li> <a href="#"> Book Reviews </a> </li>
<li> <a href="#"> Quotes and Principles </a> </li>
<li> <a href="#"> Community Aid </a> </li>
</ul>
</li>
<li> <a href="#"> About Us </a> </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<a href="the-one-thing.html">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
</a>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>Thank you for your assistance!