I am attempting to align my
<span class="fechar_fancy">Back/span>Therefore, I tried using position:absolute and bottom:0 on the element I want to position at the bottom, relative to its container, but it is not working as expected.
Can anyone identify why it is not working?
Here is a link to my fiddle showcasing my attempts: http://jsfiddle.net/KHU7h/1/
This is my HTML:
<div id="janela_fancybox-container">
<div id="janela_fancybox">
<h2>Title</h2>
<span id="data">Date time today</span> <br />
<img class="img_principal" src="../image1.jpg"/>
<p>
(Content)
</p>
<span class="fechar_fancy"><strong>Back</strong></span>
</div>
</div>
My CSS:
#janela_fancybox
{
text-align:center;
width:100%;
margin:0 auto 0 auto;
background:#fff;
position:relative;
}
#janela_fancybox .img_principal
{
width:180px;
height:200px;
float:left;
margin-right:10px;
border:5px solid #f3f3f3;
margin-top:15px;
}
#janela_fancybox #data
{
width:100%;
color:#ccc;
font-size:13px;
text-align:center;
color:#7a7a7a;
}
#janela_fancybox h2
{
width:100%;
color:#004B97;
font-size:16px;
text-align:center;
}
#janela_fancybox p
{
font-size: 14px;
text-align:justify;
line-height:25px;
height:25px;
word-spacing:-2px;
width:96%;
margin-top:15px;
}
#janela_fancybox .fechar_fancy
{
float:left;
text-decoration:none;
font-size:15px;
color:#000;
width:100%;
text-align:center;
cursor:pointer;
position:absolute;
bottom:0;
}