How to lock an element to the bottom of a div that is in a container (square)?

Question

 * {
        box-sizing: border-box;
      }
      
      .publication {
        display: flex;
        width: 100%;
        margin-top: 6%;
      }
      
      .bottom1,
      .bottom2 {
        display: flex;
        flex-direction: column;
      }
      
      .bottom1 {
        width: 70%;
      }
      
      .publicationleft {
        width: 700px;
        height: 130px;
        border-radius: 25px;
        padding: 15px;
        background: #C7D3DF;
        color: #fff;
        margin-left: 5%;
        margin-bottom: 10px;
      }
      
      .publicationbottom {
        width: 700px;
        height: 70px;
        border-radius: 25px;
        padding: 15px;
        background: #769DBD;
        color: #fff;
        margin-left: 5%;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
      }
      
      .textpub {
        color: #365A6B;
        font-size: 14px;
      }
      
      .link {
        position: relative;
        bottom: 0;
      }

 <div class="bottom1">
    
      <div class="publicationleft">
    
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
    
        <div class="link"><a href="https://www.google.com/"><font color="white">Link</font></a></div>
      </div>
      <div class="publicationleft">
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
    
        <a href="https://www.google.com/"><font color="white">Link</font></a>
      </div>
      <div class="publicationleft">
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo.</div>
        <a href="https://www.google.com/"><font color="white">Link</font></a>
      </div>
      <div class="publicationleft">
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
    
        <a href="https://www.google.com/"><font color="white">Link</font></a>
      </div>
    </div>

How to lock an an element (link in this case) to the bottom-left of a div (rounded square in this case) ?

So basically, the link has to be locked bottom-left of the rounded square.

Anyone knows a solution ? I tried it with positsion: relative. Didn't work. It keeps going to the very bottom of the container.

sorry i could not understand what you need? please briefly describe. — Suresh Suthar, Aug 11 '17 at 12:26
So you have the lightblue squares where some text and a link is displayed on. Right now the link is below the text. I want the link to permanently stay at the very bot of the blue square, no matter what. I don't want to use p tag or anyting. — Lego, Aug 11 '17 at 12:28
.link { position: absolute; bottom: 0; } and .publicationleft{position:relative;} — Suresh Suthar, Aug 11 '17 at 12:29
Possible duplicate of [css - position div to bottom of containing div](https://stackoverflow.com/questions/15358646/css-position-div-to-bottom-of-containing-div) — Muhammad, Aug 11 '17 at 12:38

score 1 · Accepted Answer · answered Aug 11 '17 at 12:29

Based on your question, I suppose you want to absolutely position the "link" at the bottom of its parent. For that to wor, simply use:

.link {
    position: absolute;
    bottom: 0;
}

Note that you will also have to set the parent to position: relative:

.publicationleft {
    position: relative;
}

Here is your proof-of-concept example:

* {
        box-sizing: border-box;
      }
      
      .publication {
        display: flex;
        width: 100%;
        margin-top: 6%;
      }
      
      .bottom1,
      .bottom2 {
        display: flex;
        flex-direction: column;
      }
      
      .bottom1 {
        width: 70%;
      }
      
      .publicationleft {
        width: 700px;
        height: 130px;
        border-radius: 25px;
        padding: 15px;
        background: #C7D3DF;
        color: #fff;
        margin-left: 5%;
        margin-bottom: 10px;
        
        /* To allow link to be absolutely positioned */
        position: relative;
      }
      
      .publicationbottom {
        width: 700px;
        height: 70px;
        border-radius: 25px;
        padding: 15px;
        background: #769DBD;
        color: #fff;
        margin-left: 5%;
        margin-bottom: 10px;
        text-align: center;
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
      }
      
      .textpub {
        color: #365A6B;
        font-size: 14px;
      }
      
      .link {
        position: absolute;
        bottom: 0;
      }

<div class="bottom1">
    
      <div class="publicationleft">
    
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
    
        <div class="link"><a href="https://www.google.com/"><font color="white">Link</font></a></div>
      </div>
      <div class="publicationleft">
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
    
        <a href="https://www.google.com/"><font color="white">Link</font></a>
      </div>
      <div class="publicationleft">
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo.</div>
        <a href="https://www.google.com/"><font color="white">Link</font></a>
      </div>
      <div class="publicationleft">
        <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
    
        <a href="https://www.google.com/"><font color="white">Link</font></a>
      </div>
    </div>

@Muhammad Well he said this in the question: "How to lock an an element (link in this case) to **the bottom-left of a div** (rounded square in this case) ?" (emphasis mine). I think you have misunderstood the question. — Terry, Aug 11 '17 at 12:32
your are right. take a vote from me for the nice solution. ;) — Muhammad, Aug 11 '17 at 12:33

score 0 · Answer 2 · answered Aug 11 '17 at 12:31

You can inbricate flexbox and use align-self or margins : update :

bottom1,
.bottom2,
.publicationleft/* added */ {
  display: flex;
  flex-direction: column;
}
.link {
  position: relative;
  margin-top: auto;/* or align-self:flex-end */
  border:solid;/*see me for demo*/
 /*bottom:0; removed */
 /* text-align:right; optionnal */
}

Demo below

* {
  box-sizing: border-box;
}

.publication {
  display: flex;
  width: 100%;
  margin-top: 6%;
}

.bottom1,
.bottom2,
.publicationleft {
  display: flex;
  flex-direction: column;
}

.bottom1 {
  width: 70%;
}

.publicationleft {
  width: 700px;
  height: 130px;
  border-radius: 25px;
  padding: 15px;
  background: #C7D3DF;
  color: #fff;
  margin-left: 5%;
  margin-bottom: 10px;
}

.publicationbottom {
  width: 700px;
  height: 70px;
  border-radius: 25px;
  padding: 15px;
  background: #769DBD;
  color: #fff;
  margin-left: 5%;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  padding-top: 0px;
  text-decoration: none;
}

.textpub {
  color: #365A6B;
  font-size: 14px;
}

.link {
  position: relative;
  margin-top: auto;/* or lign-self:flex-end */
  border:solid;/*see me for demo*/
}

<div class="bottom1">

  <div class="publicationleft">

    <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>

    <div class="link">
      <a href="https://www.google.com/">
        <font color="white">Link</font>
      </a>
    </div>
  </div>
  <div class="publicationleft">
    <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>

    <a href="https://www.google.com/">
      <font color="white">Link</font>
    </a>
  </div>
  <div class="publicationleft">
    <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo.</div>
    <a href="https://www.google.com/">
      <font color="white">Link</font>
    </a>
  </div>
  <div class="publicationleft">
    <div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>

    <a href="https://www.google.com/" >
      <font color="white">Link</font>
    </a>
  </div>
</div>

score 0 · Answer 3 · answered Aug 11 '17 at 12:33

So the way you'd want to go about this is to set your parent container (in this case publicationleft) to:

position: relative;

Then for your child container (in this case link), you would use:

position: absolute;
bottom: 0;
left: 0;

You can learn more about this method here.

score 0 · Answer 4 · answered Aug 11 '17 at 12:35

Replace below two styles with this

.publicationleft {
    position: relative;
    width: 700px;
    height: 130px;
    border-radius: 25px;
    padding: 15px;
    background: #C7D3DF;
    color: #fff;
    margin-left: 5%;
    margin-bottom: 10px;
}

.link {
    position: absolute;
    bottom: 0;
}

How to lock an element to the bottom of a div that is in a container (square)?

4 Answers4