trying to position an element always at bottom of my div

Question

Im trying to alignin my <span class="fechar_fancy">Back/span> at bottom of my div, independing of the height of my content I want always this element at the bottom.

So Im trying to give position:absolute and bottom:0 to my element that I want to position at bottom, and position relative to container, but its not working.

Somebody there see why its not working??

This is my fiddle with my trying: http://jsfiddle.net/KHU7h/1/

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>
    Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text                 Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text                 Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text                 Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text  Text Text Text Text  Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    </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;
}

score 1 · Accepted Answer · answered May 08 '14 at 22:39

The main problem I see is that #janela_fancybox p has height:25px. This keeps the height of #janela_fancybox from expanding with the text content. I removed the height:

#janela_fancybox p {
    ...
    /*height:25px;*/
}

Additionally, the absolutely positioned element could use left:0 to ensure that it starts on the left and expands to 100% width. The float is not necessary:

#janela_fancybox .fechar_fancy {
    /*float:left; */
    ...
    left:0;
}

And, the absolutely positioned element tends to overlap the text content. I added some padding to the bottom of the container to ensure that there is space at the bottom for the "back" link:

#janela_fancybox {  
    ...
    padding-bottom:25px;    
}

WORKING EXAMPLE (jsfiddle)

P.S. In this context, I don't see a need to position that element absolutely. It could just be position:relative after the text. Of course, there may be more to your application than what is presented here.

Here's a demonstration.

Thank you very much for your explanation! And it worked exactly like I wanted! :) — OzzC, May 08 '14 at 22:54

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

The problem here is div#fancybox isn't clearing the floated elements within it. You can do the clearfix class and add it to the div#fancybox. You also have a height specified on the p tag which the text within exceeds that height (you might want remove that as well).

edited May 23 '17 at 11:50

Community

1
1

answered May 08 '14 at 22:40

Ballbin

717
6
12

trying to position an element always at bottom of my div

2 Answers2