placing of image and text at the bottom of the div
Clash Royale CLAN TAG#URR8PPPplacing of image and text at the bottom of the div
I need to place an image and text at the bottom of the div which contains text. After following various posts about this question I have come up with this Fiddle
HTML
<div class="container">
<div class="row">
<div id="col-lg-4" class="col-lg-4">
<div class="cta-text">
<h3>Heading text that Can span 2 or 3 lines</h3>
</div>
<p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</strong></p>
<div class="cta-text">
<table>
<tr>
<td><img src="~/img/icon2.png" /></td>
<td valign="middle">
<a href="#">
<p><strong>More Info!</strong></p>
</a>
</td>
</tr>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="cta-text">
<h3>Heading text that Can span 2 or 3 lines</h3>
</div>
<p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.</strong></p>
<div class="cta-text">
<table>
<tr>
<td><img src="~/img/icon2.png" /></td>
<td valign="middle">
<a href="#">
<p><strong>More Info!</strong></p>
</a>
</td>
</tr>
</table>
</div>
</div>
<div class="col-lg-4">
<div class="cta-text">
<h3>Heading text that Can span 2 or 3 lines</h3>
</div>
<p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript.</strong></p>
<div class="cta-text">
<table>
<tr>
<td><img src="~/img/icon2.png" /></td>
<td valign="middle">
<a href="#">
<p><strong>More Info!</strong></p>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
CSS
.col-lg-4 {
width: 33.33333333%;
height: 200px;
position: relative;
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.cta-text {
margin-top: 10px;
text-align: left;
}
p {
margin: 10px;
display: block;
}
table {
background-color: transparent;
position: absolute;
bottom: 0;
}
.cta-text h3 {
font-weight: 900;
line-height: 1.1em;
color: #d9232d;
}
However on browser resizing absolute position of the table makes it overlap with the rest of the text. Please suggest an approach which avoids the overlapping of image and above text, also if I can structure the HTML better.
3 Answers
3
You could make your .col-lg-4 an inline-grid and set the last row to a fixed height, e.g.
display: inline-grid;
grid-template-rows: auto auto 4em;
and then you can get rid of the absolute positioned table.
div
div
span
table
td
display:inline;
display:block;
width: 100%;
I have updated your fiddle so you can see the desire result.
Updated Fiddle.
I achieve this using flex. I also added extra container for paragraph/text with fixed height and overflow should be hidden. It's easy if you can try it with bootstrap4; in this case you just need to set the paragraph/text container height and that's it.
flex
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
