I'm completely stumped by what's happening here. I've been trying to increase the height of a DIV element with an id of #titleStrip, but it just won't budge. It's beyond frustrating. I thought I knew my way around this kind of thing, but clearly not. Time for a break. Any help would be greatly appreciated. All the other solutions I found pointed to checking the height of the containing element, but in this case, the containing element is already set with a height. Here's the code snippet:
Here's my code:
@charset "utf-8";
.rndImg {
width: 120px;
height: 132px;
float: left;
margin-right: 15px;
margin-left: 10px;
margin-bottom: 5px;
shape-outside: circle();
margin-top: 24px;
border: 2px solid blue;
border-radius: 75%;
}
#featured {
width: 85px;
height: 35px;
margin-left: 35px;
margin-top: 2px;
}
#titleBP_1 {
position: absolute;
top: 20px;
left: 40%;
}
#pDate {
position: relative;
left: 77%;
top: 15px;
}
#titleStrip {
width: 100%;
height: 120px;
background: Lavender;
overflow: hidden;
}
#postOnStrip {
display: inline;
}
#inOne {
width: 500px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
#inTwo {
width: 500px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
display: inline;
}
.blogTxt {
width: 480px;
font-family: font-family: 'Alegreya', serif;
/* 'Roboto', sans-serif; */
font-size: 13px;
line-height: .8em !important;
letter-spacing: .13em;
text-align: justify !important;
margin-bottom: 15px;
margin-left: 15px;
margin-top: 30px;
margin-right: 15px;
display: inline;
}
#topBlogReveal {
display: block;
margin-left: 345px;
}
#mainContentBox {
display: flex;
flex-flow: row;
flex-wrap: no-wrap;
margin-right: 15px;
}
#postBox {
border: 2px solid blue;
width: 90%;
height: 450px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
}
#topBanner {
width: 100%;
height: 120px;
}
.dCap {
float: left;
line-height: 90%;
width: 1.1em;
font-size: 600%;
font-family: georgia;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing with Div</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/newIndex.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Include google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Lato&family=Lobster&family=Montserrat&family=Open+Sans&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Roboto&family=Viaoda+Libre&display=swap" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f213f20">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e100e11">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="javascript/index.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">About</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="index_the_real_thing.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="philosophy.html">Philosphy <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="spirituality.html">Spiritualism</a>
</li>
<li class="nav-item">
<a class="nav-link" href="socialChange.html">Social Change</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--Zeroth Row Banner Image-->
<div class="row" id="row0">
<div class="col" id="row0_col1">
<img
class="banPics"
id="topBanner"
alt="There will always be something to read here..."
src="Images/bannerPlaceholder.jpg"
>
</div>
</div>
<div class="container-fluid">
<!--First Blog Post-->
<div class="row" id="row1">
<div class="col" id="row1_col1">
<div id="postBox">
<div id="titleStrip"><a href="#" id="featured" class="btn-sm btn-primary">Featured</a>
<h3 id="titleBP_1">Blog Post #1</h3>
</div>
<div id="postOnStrip">
<p id="pDate"><b>Posted On: </b><em>June 23, 2021</em></p>
<hr class="divider">
</div>
<div id="mainContentBox">
<div id="inOne">
<img id="topBgImg" class="rndImg" src="Images/473a9b83088edfa35bdba1b7691056ad.jpg">
<p class="blogTxt"><span class="dCap">W</span>hat if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international
anatagonisms vis a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and
tissues, the mess of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their
own impending demnise. And who can blame them Life is hard.</p>
</div>
<div id="inTwo">
<p class="blogTxt">What if the opiate epidemic runs deeper than purple bruises and scabrous veins running yup and down the arms of our nation's heroine addicts? What if it isn't just a socio economic problem, nor the result of international anatagonisms vis
a vis the black marget drug trade, but rather the first symptoms of a looming existential crisis for humanity at large. The cancer patient swallows pills to ease the aching malignancy bloomin down there in the organs and tissues, the mess
of physicality from which our consciousness is supposed to arise out of. But someti,es, the cancer patient blajets hersel fin morphine just to kill that deeper ache which starts when one percieves the horizon of their own impending demnise.
And who can blame them Life is hard.</p>
<a href="#" class="btn btn-primary" id="topBlogReveal">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="row1">
<div class="col" id="row1_col1">
</div>
</div>
<div class="row" id="row1">
<div class="col" id="row1_col1">
</div>
</div>
</div>
</body>
</html>This has got to be my worst frustration ever. I had everything working on this page, and now that I'm trying to rebuild it, I feel like I'm starting from scratch and feeling incredibly inept.