Page 1 of 1

Why does this Absolute Position DIV not sit right?

Posted: Mon Aug 21, 2017 2:40 am
by simonmlewis
I have various pages with full width images, and each one is laid out slightly differently, but why is this one not sitting in the bottom of the box?

Code: Select all

<style>.home-promo-inner.pc
{
text-align: left;
position: absolute;
bottom: 40px;
left: 0px;
z-index:1;
width: 45%;
}

.home-promo-inner
{
text-align: left;
position: absolute;
top: 40px;
left: 0px;
z-index:1;
width: 45%;
}

.home-promo-inner.home
{
text-align: center;
position: absolute;
top: 40px;
left: 30%;
z-index:1;
width: 39%;
}</style>

Code: Select all

<div class='home-promo-others'>
<div class='home-promo-inner pc'>
<h1>title here</h1>
<h3>sub title here</h3>
<p>paragraph text here.</p>
</div>
<img
 srcset='/images/homeg_475.jpg 475w, 
/images/home_768.jpg 768w, 
/images/home_1024.jpg 1024w,
/images/home.jpg 1920w,
/images/home.jpg 2560w'
 src='/images/home.jpg' alt='alt here' />
</div>

Re: Why does this Absolute Position DIV not sit right?

Posted: Mon Aug 21, 2017 3:54 am
by simonmlewis
It will take the text aligning and widths, but the 'absolute positioning' is being ignored. If I alter it in the .home-promo-inner, it will take effect.