CODEWITHSUNDEEP
htmlcss
Liga
Liga

Reputation: 3439

Can't position a button on the bottom using CSS positioning, it's at the top instead

I can't understand what is happening here. I am trying to put a button at the bottom of my div. So I set the parent element's position to absolute and then set my element to relative position. But instead it's at the top and not the bottom. This is so strange, I can't understand why this is happening.

enter image description here

here is my html

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
      background-color: #f3f2f4;
    }
    .header{
        width: 105%;
        height: 117px;
        left: -11px;
        position: absolute;
        background-image: linear-gradient(#8bc2e0, #4f9bc6);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 100% 70%;
        border-bottom-right-radius: 100% 70%;
    }
    .container{
      width:450px;
      height:70vh;
      background-color:white;
      border-radius:6px;
      position:absolute;
      top:50%;
      overflow:hidden;
      left:50%;
      transform:translate(-50%,-50%);
    }

    .logo {
        width: 100px;
        margin: 0 auto;
        margin-top: 46px;
    }

    .button {
        width: 80%;
        margin: 0 auto;
        padding: 15px 20px;
        font-size: 17px;
        color: #fff;
        border-radius: 30px;
        background: #428cb5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial;
        cursor: pointer;
        transition: .2s;
        position: absolute;
        bottom: 0px;
    }

    .button:hover {
        background: #4895bf;
    }

    .body {
        position: relative;
    }
  </style>
</head>
<body>
    <div class="container">
        <div class="body">
            <div class="header">
                <div class="logo">

                </div>
            </div>  

            <div class="button">Submit button</div>
        </div>
    </div>
</body>
</html>

Here is a fiddle: https://jsfiddle.net/n35e6Lzh/

Upvotes: 0

Views: 1391

Answers (3)

DohaHelmy
DohaHelmy

Reputation: 809

Solution: https://codepen.io/DohaHelmy/pen/LYErOOL

Or use full page after running the snippet here in order to see your card with proper height.

body {
  background-color: #f3f2f4;
}

.header {
  width: 105%;
  height: 117px;
  left: -11px;
  background-image: linear-gradient(#8bc2e0, #4f9bc6);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 100% 70%;
  border-bottom-right-radius: 100% 70%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 50px auto;
  width: 450px;
  height: 70vh;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 2px 2px 2px #ddd;
}

.logo {
  width: 100px;
  margin: 0 auto;
}

.button {
  width: 80%;
  margin: 0 auto;
  padding: 15px 20px;
  font-size: 17px;
  text-align: center;
  color: #fff;
  border-radius: 30px;
  background: #428cb5;
  font-family: Arial;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
  bottom: 20px;
}

.button:hover {
  background: #4895bf;
}
<div class="container">
  <div class="body">
    <div class="header">
      <div class="logo"></div>
    </div>
  </div>
  <div class="button">Submit button</div>
</div>

Upvotes: 0

symlink
symlink

Reputation: 12209

Remove position: relative from .body and add the following rules to turn it into a flexbox:

.body {
    /*position: relative;*/
    display: flex;
    flex-flow: column;
    height: 100%;
}

Now remove the position: absolute and left/top positioning from .header and .button and give .button the following rules:

.button{
    margin-top:auto;
}

Since its in a flexbox, this will push it to the bottom.

Note: I also made the height of html, body, and the .container 100%, removed overflow:hidden from the .container and gave it a min-height, gave .body a background-color of #fff, gave the .header a width of 100%. This was all to clean up and simplify the styling.

html,body{height:100%}

body {
  background-color: #f3f2f4;
}

.header {
  width: 100%;
  height: 117px;
  /*left: -11px;
	    position: absolute;*/
  background-image: linear-gradient(#8bc2e0, #4f9bc6);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 100% 70%;
  border-bottom-right-radius: 100% 70%;
}

.container {
  width: 450px;
  height: 100%;
  background-color: white;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  /*overflow: hidden;*/
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo {
  width: 100px;
  margin: 0 auto;
  margin-top: 46px;
}

.button {
  width: 80%;
  margin: 0 auto;
  padding: 15px 20px;
  font-size: 17px;
  color: #fff;
  border-radius: 30px;
  background: #428cb5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  cursor: pointer;
  transition: .2s;
  /*position: absolute;
	    bottom: 0px;*/
  margin-top: auto;
}

.button:hover {
  background: #4895bf;
}

.body {
  /*position: relative;*/
  background-color: #fff;
  display: flex;
  flex-flow: column;
  height: 100%;
  min-height: 300px;
}
<div class="container">
  <div class="body">
    <div class="header">
      <div class="logo">

      </div>
    </div>

    <div class="button">Submit button</div>
  </div>
</div>

Upvotes: 1

Nicolas
Nicolas

Reputation: 43

You shouldnt use any div above the body. Remove absolute position in header and button, and use this 3 properties in container:

display: flex;
flex-direction: column;
justify-content: space-between;

https://jsfiddle.net/wtpyjhae/

Upvotes: 3

Related Questions