CODEWITHSUNDEEP
htmlcss
Jason Woo
Jason Woo

Reputation: 321

How to make a button sandwiched in between two divs

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?

What I'm trying to accomplish

Upvotes: 7

Views: 4328

Answers (3)

Hatchet
Hatchet

Reputation: 5428

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>

Upvotes: 8

DDan
DDan

Reputation: 8276

Here is a simple example where setting the btn to position:relative; and setting top and left locations.

<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="mybtn">BTN</div>

#mybtn {
  position:relative;
  top: -125px;
  left: 50px;
}

Here is a demo, you can set the height of the fist div in the end of the css, the button will still stay where it should be.

Upvotes: 0

Shomz
Shomz

Reputation: 37701

Just make it absolutely positioned and centered while keeping the element between the other two. The heights of the outer divs won't matter, it will always be in place.

Or you can make it a child of one of the outer ones, make the outer one relatively positioned, the button absolutely positioned and centered horizontally with top or bottom (depending on which outer div you selected as a parent) set to the negative half height of the button.

div {height: 50px; width: 200px;}
#b {background: #efe; position: relative}
#g {background: green}
button {position: absolute; height: 40px; width: 40px; background: orange; border-radius: 40px; margin: auto; left: 0;right: 0;bottom: -20px}
<div id="b"><button></button></div>
<div id="g"></div>

Upvotes: 2

Related Questions