This is the current result of my code.
What I am trying to do is get the grey box area to extend to the size of each image, regardless of how much text there is.
This is the HTML:
<body>
<div id="content" class="content">
<div id="title" class="title">
Sports
</div>
<nav class="nav_bar">
<ul>
<li><a href="./index.html">Home</a></li>
<li class="active"><a href="./sports.html">Sport</a></li>
<li><a href="./academics.html">Academics</a></li>
<li><a href="./others.html">Other</a></li>
<li><a href="./stats.html">Stats</a></li>
</ul>
</nav>
<div id="page_description" class="page_description">
One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
</div>
<div class="activity_container">
<div class="title_hours">
<h1>The Gym</h1>
<h3> - 5 Hours</h3>
</div>
<hr class="hr_title_divider">
<div class="description_pic">
<div class="img_div">
<img src="./images/gym.jpeg"/>
</div>
<div class="description">
Lorem ipsum dolor sit amet, ac ac condimentum aliquam dui, et quam turpis mauris, scelerisque ad vivamus felis id aliquet, aenean quam et vestibulum sed lacus sit. Amet hendrerit vitae phasellus nec, enim nulla et id at enim amet. U
</div>
</div>
</div>
<hr class="hr_divider">
<div class="activity_container">
<div class="title_hours">
<h1>5-a-side Football</h1>
<h3> - 5 Hours</h3>
</div>
<hr class="hr_title_divider">
<div class="description_pic">
<div class="img_div">
<img src="./images/5-aside.jpeg"/>
</div>
<div class="description">
Lorem ipsum dolor sit amet, ac ac condimentum aliquam dui, et quam turpis mauris, scelerisque ad vivamus felis id aliquet, aenean quam et vestibulum sed lacus sit. Amet hendrerit vitae phasellus nec, enim nulla et id at enim amet. U
</div>
</div>
</div>
<hr class="hr_divider">
<div class="activity_container">
<div class="title_hours">
<h1>Futsal</h1>
<h3> - 5 Hours</h3>
</div>
<hr class="hr_title_divider">
<div class="description_pic">
<div class="img_div">
<img src="./images/futsal.jpeg" style="overflow: hidden;"/>
</div>
<div class="description">
Lorem ipsum dolor sit amet, ac ac condimentum aliquam dui, et quam turpis mauris, scelerisque ad vivamus felis id aliquet, aenean quam et vestibulum sed lacus sit. Amet hendrerit vitae phasellus nec, enim nulla et id at enim amet. U
</div>
</div>
</div>
<hr class="hr_divider">
</div>
and this the css:
.page_description {
background-color:rgba(555,555,555,0.5);
width: 40%;
margin-left: auto;
margin-right: auto;
font-size: large;
border-radius: 8px;
margin-bottom: 2%;
}
.main_container {
width: 40%;
margin-left: auto;
margin-right: auto;
background-color:rgba(555,555,555,0.5);
border-radius: 8px;
display: flex;
}
hr {
border-width: 2px;
}
.hr_tag {
width:40%;
margin-left: auto;
margin-right: auto;
}
.hr_divider {
width: 40%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.hr_title_divider {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
color: white;
background-color: white;
border: none
}
.activity_container {
width: 40%;
margin-left: auto;
margin-right: auto;
background-color:rgba(555,555,555,0.5);
border-radius: 8px;
}
.title_hours {
width: 100%;
text-align: center;
}
.title_hours h1{
display: inline;
text-decoration: underline;
}
.title_hours h3{
display: inline;
font-weight: normal;
}
img {
float: right;
display: block;
}
.description_pic {
word-break: break-all;
word-break: break-word;
display: inline;
height: 100%;
}
.description {
font-size: 2vh;
padding: 0% 2% 2% 2%;
margin-right: 2%;
}
.img_div {
padding-right: 4%;
padding-left: 2%;
height: auto;
}
Ive tried looking for a solution but havent been able to find one. I think the problem lies in the fact that I havent defined the height of the activity_container, however I dont how how to change this dynamically based of the size of the image. Another point to note is, in some smaller screens the text wraps around the bottom of the image, and therefore this issue doesnt arrive.
any help would be appreciated
