CODEWITHSUNDEEP
htmlcss
cweave
cweave

Reputation: 306

Paragraph Bottom Right of Div

I have two divs that each have a paragraph link at the bottom right of the div. When I add the code bottom: 0; position: absolute;, it pulls both the links together into the far right div instead of keeping them in their own divs. How can I set this so that the link stays inside of it's own container at the bottom right corner?

.header-unit {
  height: 300px;
  position: relative;
  margin-top: 5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/images/liberty.jpg");
}

#messageContainer {
  margin-left: 200px;
  /* 	padding-top: 450px; */
  position: relative;
  display: inline-block;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  line-height: 1.15;
  text-transform: uppercase;
}

#knowledge,
#practice {
  padding: 25px;
  width: 350px;
  height: 300px;
  display: block;
  color: #fff;
}

.linksect {
  bottom: 0;
  right: 25px;
  position: absolute;
}

#knowledge {
  background: #8b8b8b;
}

#practice {
  background: #554a58;
}

.indexheader {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #554a58;
}

.firmvalues {
  margin-top: 50px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="header-unit">
  <div id="messageContainer" class="w3-row">
    <div id="knowledge" class="w3-col l6">
      <h1>Knowledge. Experience. Commitment. </h1>
      <p>The attorneys of ....</p>
      <p class="linksect"><a href="/page/3/attorneys">Our Attorneys <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p>
    </div>
    <div id="practice" class="w3-col l6">
      <h1>Practice Areas</h1>
      <p>Business and Commercial Law<br> Insurance Coverage and Indemnity Law<br> Medical and Dental Malpractice<br> Probate Law and Practice<br> and more...</p>
      <p class="linksect"><a href="/page/2/practices">Practice Areas <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p>
    </div>
  </div>
</div>

Upvotes: 1

Views: 280

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

You can provide context for position:absolute by adding a non-static position property to the ancestor element you want the absolutely positioned element to be relative to. position:relative is usually a good choice because it keeps your element in the document flow. (Note that I added it to the #knowledge,#practice rule.)

.header-unit {
  height: 300px;
  position: relative;
  margin-top: 5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/images/liberty.jpg");
}

#messageContainer {
  margin-left: 200px;
  /* 	padding-top: 450px; */
  position: relative;
  display: inline-block;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  line-height: 1.15;
  text-transform: uppercase;
}

#knowledge,
#practice {
  padding: 25px;
  width: 350px;
  height: 300px;
  display: block;
  color: #fff;
  position: relative;
}

.linksect {
  bottom: 0;
  right: 25px;
  position: absolute;
}

#knowledge {
  background: #8b8b8b;
}

#practice {
  background: #554a58;
}

.indexheader {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #554a58;
}

.firmvalues {
  margin-top: 50px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="header-unit">
  <div id="messageContainer" class="w3-row">
    <div id="knowledge" class="w3-col l6">
      <h1>Knowledge. Experience. Commitment. </h1>
      <p>The attorneys of ....</p>
      <p class="linksect"><a href="/page/3/attorneys">Our Attorneys <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p>
    </div>
    <div id="practice" class="w3-col l6">
      <h1>Practice Areas</h1>
      <p>Business and Commercial Law<br> Insurance Coverage and Indemnity Law<br> Medical and Dental Malpractice<br> Probate Law and Practice<br> and more...</p>
      <p class="linksect"><a href="/page/2/practices">Practice Areas <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions