How to vertically align an anchor to the right side of a responsive div?

Question

I'm having some trouble trying to align a button with the right side of a responsive div (I'm trying to make all my html responsive).

What I am achieving right now is this current example:

.container1 {
  background-color: yellowgreen;
  position: relative;
  width: 100%;
  height: 400px;
}

.container1-text1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  -webkit-transform: translate(-105%, -50%);
  -ms-transform: translate(-105%, -50%);
  transform: translate(-105%, -50%);
  background-color: orange;
  padding: 1.2em;
}

.container1-text2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  -webkit-transform: translate(5%, -50%);
  -ms-transform: translate(5%, -50%);
  transform: translate(5%, -50%);
  background-color: fuchsia;
  padding: 1.2em;
}

.custom-button-style {
  float: right;
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
  cursor: pointer;
}

<div class="container1">
  <div class="container1-text1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <div class="container1-text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <a href="" target="_blank">
    <div class="custom-button-style">BUTTON TEXT</div>
  </a>
</div>

Fiddle of current example: http://jsfiddle.net/6zstozwf/

But what I would like to achieve is this:

To keep it short, I thought on wrapping both the button and the second "pink/fuchsia" div on a wrapper-div, but I didn't have success on it.

Answer 1

The main problem is, that you have your elements positioned absolute. That will break your layout especially on small devices.

There are a few solutions out there. This one down below is made with display: flex mainly. See comments in code for explanation.

*, *::before, *::after {
  /* changing calculation of box model for all elements */
  box-sizing: border-box;
}

body {
  /* I guess your whole page should be green anyway.
     Otherwise you can put this back to .container1 */
  background-color: yellowgreen;
}

.container1 {
  /* making the container kind of "flexible" */
  display: flex;
  
  /* spread elements from across width but leave a gap between them */
  justify-content: space-between;
  
  /* vertically align elements to the top */
  align-items: flex-start;
  
  /* when elements reach over a 100% wrap them to the next line */
  flex-wrap: wrap;
  
  /* vw means viewport width - similar to % */
  padding: 5vw;
}

/* combine styles for both text elements */
.container1-text1, .container1-text2 {
  width: 40vw;
  padding: 1.2em;
}

.container1-text1 {
  background-color: orange;
}

.container1-text2 {
  background-color: fuchsia;
}

.button-container {
  /* just an element spread to 100% width
     all inline elements should be aligned to the right */
  width: 100%;
  text-align: right;
  
  padding-top: 5vw;
}

.custom-button-style {
  display: inline-block;
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
}

<div class="container1">
  <div class="container1-text1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <div class="container1-text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  
  <div class="button-container">
    <a href="" target="_blank" class="custom-button-style">
      BUTTON TEXT
    </a>
  </div>
</div>

Answer 2

You're having trouble because of your absolute positioning and your float. Both cause more trouble than they're worth. Look at inline-block and leave positioning static, then your anchor can flow below them as normal and be aligned right with text-align.

* {
  box-sizing: border-box;
}
.container {
  background-color: yellowgreen;
  margin-bottom: 20px;
  text-align: center;
}

.container > div {
  display: inline-block;
  width: 40%;
  margin: 4.5%;
  background-color: orange;
  padding: 1.2em;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: yellowgreen;
  margin-bottom: 20px;
  text-align: center;
}

.container > div {
  display: inline-block;
  width: 40%;
  margin: 4.5%;
  background-color: orange;
  padding: 1.2em;
}

.container > div.text2 {
  background-color: fuchsia;
}

.custom-button-style {
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
  cursor: pointer;
}

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


.custom-button-style {
  color: white;
  padding: 10px 32px;
  background-color: #D0D763;
  border-radius: 8px;
  cursor: pointer;
}

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

<div class="container"> 
  <div class="text1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
  <div class="text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
</div>
<div class="text-right">
  <a href="" target="_blank">
    <span class="custom-button-style">BUTTON TEXT</span>
  </a>
</div>

Fiddle