Why does this Absolute Position DIV not sit right?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Why does this Absolute Position DIV not sit right?

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply