How to make a sandwich button between two divs

advertisements

I have 2 Divs on a view port that with height 50vh each, so that the entire view port is filled.

I was able to accomplish the button in the middle by including it under the upper div, then setting the button's margin-top to a negative value, so that it would sit lower.

However, I need to use min-height: 50vh (instead of height: 50vh) for the cases when the content is longer to allow scrolling. Because of min-height, the upper div ends up getting taller to include the entire button.

How can I do this? I tried making a div in between upper and the lower divs (as opposed to under the upper one) but I can't seem make it work. I have included a picture below of what I am trying to accomplish. What is the ideal way to achieve this?


VoilĂ !

The button between two <div>s gets these styles:

display: block;
position: absolute;
left: 50%;
transform: translateY(-50%) translateX(-50%);

  • display: block Allows for width and height to be set.
  • position: absolute Places it independently of all other elements.
  • left: 50% Sends it 50% of the way across the page (to the right).
  • transform: translateY(-50%) translateX(-50%) Translates it up 50% of its width (because otherwise, its top would be aligned with the 2nd <div>'s top), and translates it to the left 50% of its width.

Snippet:

html,
body {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 30px;
  outline: 0;
  margin: 0;
  padding: 0;
}
.top {
  min-height: 50vh;
  color: #00bfa5;
  padding: .1em 1em;
}
.main-btn {
  background-color: #ffc400;
  border: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  font-weight: bold;
  font-size: 2em;
  color: white;
  left: 50%;
  border-radius: 50%;
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: background-color 0.1s ease-out;
}
.main-btn:hover {
  background-color: #ffcc11;
}
.bottom {
  min-height: 50vh;
  background-color: #00bfa5;
  color: white;
  font-size: .8em;
  padding: 2em;
}
input {
  width: 2em;
  height: 2em;
}
<div class="top">
  DID YOU EXERCISE FOR 30 MINUTES PER DAY OVER THE LAST 3 DAYS?
</div>
<button class="main-btn">&gt;</button>
<div class="bottom">
  <div>
    <input type="radio" name="e" id="yes" />
    <label for="yes">I did.</label>
  </div>
  <div>
    <input type="radio" name="e" id="mostly" />
    <label for="mostly">I mostly did.</label>
  </div>
  <div>
    <input type="radio" name="e" id="no" />
    <label for="no">Not this time.</label>
  </div>
</div>