0

I have these employee cards I am making for a responsive website (Will be represented as a cat in my fiddle). I have a button that will be in the bottom right of every card. I currently have a working example of what I want using absolute, but I quickly noticed that when the container gets smaller the button overlaps the text.

I am looking to see if anyone knows of an alternative way to get what I want without using absolute(for the reason above) and without using flex(I require older browser support)

Here is the fiddle: https://jsfiddle.net/8s46ke1y/

I'll add the code here so people can see in this post:

.kittywrapper {
 display: inline-block;
 padding: 1em;
 text-align: left;
 border: 1px solid;
 border-color: #e3e3e3;
 width: 90%;
 position: relative;
}

.imagecontainer {
 float: left;
        height: 100%;
        width: auto;
}

.imagecontainer img {
 height: auto;
 width: auto;
 max-width: 100%;
 max-height: 200px;
 object-fit: contain;
}

.kittycontainer {
 padding-left: 2%;
        overflow: hidden;
        width: auto;
}

.kittytitle {
 display: block;
        font-weight: 700;
}

.kittytext {

}

.buttoncontainer {
 position: absolute;
 bottom: 0;
 right: 0;
 margin: 2%;
}

.pettext {
 float: left;
}

.button {
 float: right;
}
<div class="kittywrapper">
      <div class="imagecontainer">
        <img class="imageclass" src="https://i.stack.imgur.com/UJ3pb.jpg">
      </div>
      <div class="kittycontainer">
        <div class="kittytitle">
          Smelly Cat
        </div>
        <div class="kittytext">
          Smelly Cat, Smelly Cat
          What are they feeding you?
          Smelly Cat, Smelly Cat
          It's not your fault

          They won't take you to the vet
          You're obviously not their favorite pet
          Smelly Cat, Smelly Cat
          It's not your fault

          You may not be a bed of roses
          You're not friend to those with noses
          I'll miss you before we're done
          Or the world will smell as one

          Smelly Cat, Smelly Cat
          What are they feeding you?
          Smelly Cat, Smelly Cat
          It's not your fault

          Oh are we done?

          One, two, what's that smell?

          Smelly Cat, Smelly Cat
          What are they feeding you?
          Smelly Cat, Smelly Cat
          You're getting fat

          I think that I'm gonna be sick
          It's your ears, and nose and pick
          Part of it, tempt me

          One, two, what's that smell?

          All the dogs in the neighborhood
          Are saying this for your own good
          What, you're fat, so you can't run
          No fun, I bet, No fun

          Smelly Cat, Smelly Cat
          Porno makes you eat like that
          I saw you in the shopping mall

          Smelly Cat
          It's not your fault
          Smelly Cat
          It's not your fault
          Smelly Cat, Smelly Cat
          It's not your fault
          We know what was in your food
          They say it might affect your mood
          You smell like something dead
          You smell like something dead
          You smell like something dead
          You smell like something dead
          One, two, what's that smell?
          Yeah, that's not the song
        </div>
      </div>
      <div class="buttoncontainer">
        <div class="pettext">
          Pet the kitty!
        </div>
        <button type="button" class="button">Pet</button>
      </div>
    </div>
R Wri
  • 272
  • 1
  • 17
  • 2
    Given that `flexbox` is fully supported in all modern browsers and partially supported as long ago as 2012, what kind of antiquated browser are you developing for?? In fact, only 0.17% of browsers in global use don't support `flexbox`. – Martin Jan 10 '20 at 13:49
  • as mentioned by @Martin you should use `flexbox`. Probably, just as addition to @Martin's comment, you have to use the `flex-grow` properties to make sure that your button stays always at the bottom. Look at `flex-grow` how it works and you will get your button working – Iamnino Jan 10 '20 at 13:57
  • check *all* the answers of the duplicate – Temani Afif Jan 10 '20 at 14:03
  • @Martin We have hundreds of use cases each year of people using IE8-10. I understand that global usage is low, but that doesn't really matter when my use case is much higher. – R Wri Jan 10 '20 at 14:04
  • @NPcompete I might very well have to resort to that, but I was wondering if there was a solution that works for my specific scenario. – R Wri Jan 10 '20 at 14:06
  • @TemaniAfif please could you fully understand my problem before flagging it as a duplicate. I have seen and tried the answers in that thread. responding "check all" is not insightful or helpful at all. – R Wri Jan 10 '20 at 14:09
  • i suppose that if you are trying to avoid `flexbox` you probably need to avoid `:before` and `:after` as well... so it might become tricky to do just in CSS... i can not answer right away, i should do some tests. the other option would still be using javascript. – Iamnino Jan 10 '20 at 14:11
  • @NPcompete Yeah it might be too tricky just to try and do in CSS, no rush on answering. I appreciate any and all help I get. I had not considered the javascription option, so I will do some digging on that too. – R Wri Jan 10 '20 at 14:17

0 Answers0