Position Div To End of Image - html

Question

I'm trying to align a row class to be stuck to the bottom of an image. I want it to stick to the bottom and not move. I've added a comment as to what section I want to stick. It starts at the footer tag with id #offer.
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
Shop Now
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>
CSS:
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
#offer {
background-color: black;
padding: 40px;
opacity: 0.5;
margin-top: 263px; /* This is what I want to fix. I'm not sure of the code I have to use to position it to make it stick to the bottom and be able to resize-*/
}
#offer i, h2, p {
color: white;
}
#offer i {
font-size: 35px;
}

Answer 1

position: absolute is what you're looking for. You can read more about it here - https://developer.mozilla.org/en-US/docs/Web/CSS/position
Added position: relative to the parent element, and position: absolute; bottom: 0; left: 0; right: 0; to #offer
#ImageMain {
background-image: url(https://techvibes.com/wp-content/uploads/2016/06/11169410_445386015628115_4871226287313974850_o.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
text-align: center;
color: white;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#offer {
background-color: rgba(0,0,0,0.5);
padding: 40px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#offer i,
h2,
p {
color: white;
}
#offer i {
font-size: 35px;
}
<div id="ImageMain">
<ul id="nav">
<li id="brand">MINIMAL</li>
<li id="navm">Men</li>
<li id="navm">Women</li>
<li id="navm">Contact</li>
</ul>
<h1>Simplicity is Minimal</h1>
Shop Now
<!--I'm trying to make this section stick to the bottom of #ImageMain-->
<footer id="offer">
<div class="row">
<div class="col-md-4" align="center">
<i class="fa fa-truck" aria-hidden="true"></i>
<h2>Fast Shipping</h2>
<p>Your order(s) are shipped out the next day with UPS Express Shipping. International orders are shipped out with DHL Express</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-reply" aria-hidden="true"></i>
<h2>Easy Returns</h2>
<p>Not satisfied with our product? Sizing too big/small? We will accept your return and grant your money back/ship out your right size hassle free</p>
</div>
<div class="col-md-4" align="center">
<i class="fa fa-phone" aria-hidden="true"></i>
<h2>Caring Customer Service</h2>
<p>Our 24/7 customer service reps will help you with every question and have and will work to satifsy your needs</p>
</div>
</div>
</footer>
</div>