I have a Heading 1(#banner h1.index_banner_text) that needs to always be positioned 20px from the bottom of the page and 570px from the left of the page. If the window is resized, I would like the heading to stack naturally but always remain 20px from the bottom of the page. I understand, to have it sit at the bottom, it needs to be in a container(#banner .text), but when I create that container, if have issues with the width extending too far. I've been trouble shooting this for hours, if anyone has any insight, that would be great. At the moment, I have the #banner .text container at 40% width because this means it doesn't create a huge horizontal scroll bar on my window but it's not at full width and the header is stacking too short.
The elements are also sitting within a 100% width and height background fading banner. (Could be contributing to the issues)
/*banner h1 container*/
#banner .text{
position:relative;
z-index:50;
left:570px;
height:1125px;
width:40%;
}
/*banner h1*/
#banner h1.index_banner_text{
position:absolute;
bottom:20px;
font-family: 'Museo300Regular';
font-size:43.8px;
text-shadow:1px 1px 2px #000;
color:#e7e7e7;
}
/*background fading css*/
#banner{
height:100%;
width:100%;
z-index:1;
position:relative
}
#banner .wrapper .background{
position:fixed;
/*left:50%;*/
right:0;
top:0;
z-index:1;
}
#banner .wrapper{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:2;
display:none;
}
#banner .wrapper.active{
display:block;
z-index:3;
}
#banner .wrapper.fading{
z-index:4;
}
