Bottom positioned button overlapping content

Question

I'm trying to get a button to position at the bottom of a div. I'm using the position:absolute for the button and setting the parent div to position:relative.

But for some reason, the button at the bottom overlaps over the content once the content extends down. I'm not sure what's causing it to overlap.

Here's a fiddle: http://jsfiddle.net/LHxeP/8/

Here's my CSS:

.a{
width: 33%;
float: left;
border: 1px solid red;
position: relative;
text-align: center;
padding: 2%;
}

img {
display: block; 
width: 100%; 
max-width:150px; 
height: auto;
margin: 2% auto;
}

.button{
position: absolute;
bottom: 5px;
background: green;
display: block;
left: 50%;
width: 50%;
margin-left: -25%;
border-radius:10px;
}

I'm not sure if it has something to do with the initial height being set on the parent elements either. I know that some of the content will vary within each div which will extend the height of the div.

I have a jQuery script that will check the longest height parent div and then the rest of the child elements to match the longest div, hence the inline height.

I hope that makes sense. It's been a long night.

You set the height on the container divs to 350px which limits what can appear inside of it. — j08691, Jul 01 '14 at 14:57
@j08691 - I have a jQuery script that will check the height of the longest div and then add an inline-style to all parent elements since the amount of content will vary in each div. — ultraloveninja, Jul 01 '14 at 15:17

score 0 · Accepted Answer · answered Jul 01 '14 at 14:57

0

http://jsfiddle.net/LHxeP/9/

the absolute position of the button makes the button be over the div content because you use position absolute, you must increase the height of the div (to reserve some space for the button)

.a {
    width: 33%;
    float: left;
    border: 1px solid red;
    position: relative;
    text-align: center;
    padding: 2%;
    padding-bottom: 50px;
}

i added padding-bottom: 50px; to reserve some bottom space ... you may change the value, depending on how big the button is

answered Jul 01 '14 at 14:57

florin.prisecariu

422
3
8

the height of the div depends on its content ... a content with position absolute does not count for the div height – florin.prisecariu Jul 01 '14 at 14:59
now i have seen that you have fixed height for the divs. If you say the content may vary, do NOT use fixes height – florin.prisecariu Jul 01 '14 at 15:03
The problem is I'm trying to get the height of each div to match depending on the longest div with the most amount of content. – ultraloveninja Jul 01 '14 at 15:15
making all the divs to have the hight of the tallest one is entirely another issue, does not have anything to do with the button overlaps. for the same height divs issue check http://stackoverflow.com/questions/16594891/make-children-divs-the-height-of-tallest-child – florin.prisecariu Jul 01 '14 at 15:21
@florin.preisecariu - I have a jQuery script that check for the tallest element and then appends that height to all of the other divs to make all of the the same height of the tallest div. I can't seem to get it to work within this fiddle, so it's hard for me to illustrate what it's doing. – ultraloveninja Jul 01 '14 at 15:34
Well, after messing with it for a bit, I was able to use the suggested solution and added some padding to the bottom of the div. I'm not sure if it's the best solution, but it seems to work for what I need. – ultraloveninja Jul 01 '14 at 15:56

score 0 · Answer 2 · answered Jul 01 '14 at 14:58

Firstly, don't use the inline CSS if possible. put the height value in your '.a' class (also you might want to consider renaming '.a' since that is very similar to the link element <a>).

Secondly, and in response to your specific problem, set the height attribute of your 'a' class to auto and it will accommodate for the height of your content.

.a{
  width: 33%;
  height: auto;
  float: left;

...

score 0 · Answer 3 · answered Jul 01 '14 at 15:24

That happens because you are setting a fixed height in the div, so the position absolute of the button causes the overlapping when the content of de div exceeds the height set.

I recommend use overflow: scroll if you want a fixed height, and you could set the button in the top of the content and just under the image. Doing this you don't need to set position:absolute to the button. Maybe it is not the best solution, but I hope this helps.

Bottom positioned button overlapping content

3 Answers3