Absolutely positioned child not getting parent's background color

Question

I have 4 buttons ("Read more") aligned at the same level at the bottom of their parents.

Each one has different content, so in order to gave them all the same size I used flexbox and absolute positioning.

The problem now is that I want each parent to have a background color and the buttons to stay inside, but they stay outside because I told them to be at the bottom of each column.

I'm a bit stuck because if I remove the absolute positioning of the buttons, the parents will have different sizes again, and I don't want them to have a determined height for the responsive design.

Here's the working fiddle

.col-3 {
  width: 25%;
  background-color:red
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before,
*::after {
  box-sizing: border-box;
}

[class*="col-"] {
  float: left;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

#services {
  background-color: rgb(265, 265, 265);
  color: #424242;
}

#services .col-3 {
  padding: 0 20px 20px;
  text-align: left;
}

#services .row .col-3:first-child {
  margin-left: 0
}

#services .right-align {
  text-align: right;
}

#services [class^="flaticon-"]:before,
#services [class^="flaticon-"]:after,
#services [class*="flaticon-"]:before,
#services [class*="flaticon-"]:after {
  font-size: 60px;
  margin-left: 0;
  -webkit-transition: color 0.8s;
  transition: color 0.8s;
}

#services [class*="flaticon"]:hover {
  color: #1AC4F8
}

#sevices h3 {
  margin: 10px 0
}

.btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 400px;
  padding: 5px 10px;
  border: 2px solid #1AC4F8;
  color: #1AC4F8;
  cursor: pointer;
  -webkit-transition: color 0.8s, background-color 0.8s;
  transition: color 0.8s, background-color 0.8s;
}
.row {
  display: flex;
  flex-direction: row;
  padding-bottom:40px;
}
.column {
  flex: 0 0 auto;
  position: relative;
}
.btn-bottom {
  position: absolute;
  bottom: -40px;
  left: 0px;
  right: 0px;
  text-align:center;
}

<section id="services">
  <!-- Services Starts Here -->
  <div class="wrapper">
    <h2>SERVICES</h2>
    <div class="divider"></div>
    <div class="row">
      <div class="col-3 column">
        <h3>Consulting and audit</h3>
        <p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
      <div class="col-3 column">
        <h3>Web Development</h3>
        <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
      <div class="col-3 right-align column">
        <h3>Search Engine Optimization</h3>
        <p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
      <div class="col-3 right-align column">
        <h3>Pay Per Click Management</h3>
        <p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
    </div>
  </div>
</section>

score 2 · Accepted Answer · edited May 23 '17 at 12:19

Since you're already using flexbox, why not use flex properties to pin the "Read more" button to the bottom. You don't need absolute positioning.

Try making .col-3 a nested flex container:

.col-3 {
    display: flex;
    flex-direction: column;
    width: 25%;
    background-color: red
}

.btn {
    margin-top: auto;
}

.row {
  display: flex;
  flex-direction: row;
  padding-bottom: 40px;
}
.col-3 {
  display: flex;
  flex-direction: column;
  width: 25%;
  background-color: red
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*::before,
*::after {
  box-sizing: border-box;
}
#services {
  background-color: rgb(265, 265, 265);
  color: #424242;
}
#services .col-3 {
  padding: 0 20px;
}
#services .row .col-3:first-child {
  margin-left: 0
}
#services .right-align {
  text-align: right;
}
#services [class^="flaticon-"]:before,
#services [class^="flaticon-"]:after,
#services [class*="flaticon-"]:before,
#services [class*="flaticon-"]:after {
  font-size: 60px;
  margin-left: 0;
  -webkit-transition: color 0.8s;
  transition: color 0.8s;
}
#services [class*="flaticon"]:hover {
  color: #1AC4F8
}
#sevices h3 {
  margin: 10px 0
}
.btn {
  margin-top: auto;
  font-family: 'Oswald', sans-serif;
  font-weight: 400px;
  padding: 5px 10px;
  border: 2px solid #1AC4F8;
  color: #1AC4F8;
  cursor: pointer;
  transition: color 0.8s, background-color 0.8s;
}

<section id="services">
  <!-- Services Starts Here -->
  <div class="wrapper">
    <h2>SERVICES</h2>
    <div class="divider"></div>
    <div class="row">
      <div class="col-3 column">
        <h3>Consulting and audit</h3>
        <p>Get help to accelerate your company online from our highly experienced specialists. It is as good as it sounds!</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
      <div class="col-3 column">
        <h3>Web Development</h3>
        <p>Professional custom e-commerce and web design to let your business grow at a rapid pace. See how we do that.</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
      <div class="col-3 right-align column">
        <h3>Search Engine Optimization</h3>
        <p>Want to be on Page 1 of Google and Bing? Read about our SEO services that drive more potential customers.</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
      <div class="col-3 right-align column">
        <h3>Pay Per Click Management</h3>
        <p>Attract highly relevant audience with Google Adwords, Display, Retargeting, Facebook, YouTube, Twitter.</p>
        <a href="#" class="btn btn-bottom">Read more</a>
      </div>
    </div>
  </div>
</section>

revised fiddle

This solution positions all flex items in a column at the start of the container (justify-content: flex-start is a default value). Then the button is fixed to the bottom with a flex auto margin.

One last thing, I have been trying to figure out how "margin-top:auto" worked here but can't guess. I'm not very familiar with flexbox. — Alvarado87, Sep 15 '16 at 19:31
I provided a link in my answer. Click text "flex `auto` margin". Here it is again: http://stackoverflow.com/q/32551291/3597276 — Michael Benjamin, Sep 15 '16 at 19:39

Absolutely positioned child not getting parent's background color

1 Answers1