Extend a parent div to fit images height [duplicate]
up vote
0
down vote
favorite
This question already has an answer here:
What is a clearfix?
11 answers
What methods of ‘clearfix’ can I use?
28 answers
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
html css
asked Nov 19 at 22:22
wtreston
577213
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 22:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
up vote
0
down vote
favorite
This question already has an answer here:
What is a clearfix?
11 answers
What methods of ‘clearfix’ can I use?
28 answers
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
html css
asked Nov 19 at 22:22
wtreston
577213
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 22:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
you need to clear float .. easy way : addoverflow:hiddentodescription_pic
– Temani Afif
Nov 19 at 22:25
@TemaniAfif didnt work
– wtreston
Nov 19 at 22:26
1
and remove display:inline also from the same class. usingdisplay:inlineisn't good in general, replace with inline-block to avoid bad surprise
– Temani Afif
Nov 19 at 22:27
Thanks thats worked now!
– wtreston
Nov 19 at 22:28
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This question already has an answer here:
What is a clearfix?
11 answers
What methods of ‘clearfix’ can I use?
28 answers
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
html css
asked Nov 19 at 22:22
wtreston
577213
This question already has an answer here:
What is a clearfix?
11 answers
What methods of ‘clearfix’ can I use?
28 answers
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
This question already has an answer here:
What is a clearfix?
11 answers
What methods of ‘clearfix’ can I use?
28 answers
html css
html css
asked Nov 19 at 22:22
wtreston
577213
asked Nov 19 at 22:22
wtreston
577213
asked Nov 19 at 22:22
wtreston
577213
asked Nov 19 at 22:22
wtreston
577213
asked Nov 19 at 22:22
wtreston
577213
577213
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 22:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 19 at 22:24
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
you need to clear float .. easy way : addoverflow:hiddentodescription_pic
– Temani Afif
Nov 19 at 22:25
@TemaniAfif didnt work
– wtreston
Nov 19 at 22:26
1
and remove display:inline also from the same class. usingdisplay:inlineisn't good in general, replace with inline-block to avoid bad surprise
– Temani Afif
Nov 19 at 22:27
Thanks thats worked now!
– wtreston
Nov 19 at 22:28
add a comment |
1
you need to clear float .. easy way : addoverflow:hiddentodescription_pic
– Temani Afif
Nov 19 at 22:25
@TemaniAfif didnt work
– wtreston
Nov 19 at 22:26
1
and remove display:inline also from the same class. usingdisplay:inlineisn't good in general, replace with inline-block to avoid bad surprise
– Temani Afif
Nov 19 at 22:27
Thanks thats worked now!
– wtreston
Nov 19 at 22:28
1
1
you need to clear float .. easy way : add
overflow:hidden to description_pic– Temani Afif
Nov 19 at 22:25
you need to clear float .. easy way : add
overflow:hidden to description_pic– Temani Afif
Nov 19 at 22:25
@TemaniAfif didnt work
– wtreston
Nov 19 at 22:26
@TemaniAfif didnt work
– wtreston
Nov 19 at 22:26
1
1
and remove display:inline also from the same class. using
display:inline isn't good in general, replace with inline-block to avoid bad surprise– Temani Afif
Nov 19 at 22:27
and remove display:inline also from the same class. using
display:inline isn't good in general, replace with inline-block to avoid bad surprise– Temani Afif
Nov 19 at 22:27
Thanks thats worked now!
– wtreston
Nov 19 at 22:28
Thanks thats worked now!
– wtreston
Nov 19 at 22:28
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
you need to clear float .. easy way : add
overflow:hiddentodescription_pic– Temani Afif
Nov 19 at 22:25
@TemaniAfif didnt work
– wtreston
Nov 19 at 22:26
1
and remove display:inline also from the same class. using
display:inlineisn't good in general, replace with inline-block to avoid bad surprise– Temani Afif
Nov 19 at 22:27
Thanks thats worked now!
– wtreston
Nov 19 at 22:28