0

I have a login page that is absolutely centered in the middle of the page both horizontally and vertically. Inside there are 2 divs, smaller pink one and bigger blue one. How can I center the bigger one?

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    width: 400px;
    text-align: center;
    background: blue
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>
verunar
  • 884
  • 12
  • 25
  • the width of the blue bit is larger than the width of the container - what do you want to happen with the excess? If you actually want your blue bit to fit into your container, then you need to increase the containers size to larger than the blue bits width – Pete Oct 04 '18 at 13:22
  • 1
    I dont want it to fit the container no – verunar Oct 04 '18 at 13:39

4 Answers4

1

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {

    width: 400px;
    text-align: center;
    background: blue;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;

}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>
HTML CSS Hupp Technologies
  • 335
  • 1
  • 6
0

Just set width to 100%

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    width: 100%;
    text-align: center;
    background: blue
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>
Matt
  • 1,245
  • 2
  • 17
  • 32
0

I think this will help you

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
    overflow: visible;

}
.smaller {
    background: pink;
    width: 300px;
    margin:auto;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    width: 400px;
    text-align: center;
    background: blue;
    margin:auto;
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>
Hariom Singh
  • 1,420
  • 1
  • 8
  • 21
0

You may want to consider using flexbox which also is responsive by nature.

.container {
    background: rgba(249, 249, 249, 1);
    bottom: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1), 0 0px 4px 0 rgba(0, 0, 0, 1);
    height: 342px;
    height: max-content;
    left: 0;
    margin: auto;
    padding: 60px 30px 60px 30px;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    overflow: visible;

}
.smaller {
    background: pink;
}
button {
    background: linear-gradient(rgba(239, 83, 80, 1), rgba(179, 47, 47, 1));
    border: 0;
    color: rgba(255, 255, 255, 1);
    margin: 10px;
    padding: 8px 70px 8px 20px;
    box-sizing: content-box;
    width: 50px;
}
.bigger {
    display: flex;
    background: blue;
    justify-content: space-around;
}
<div class="container">
  <div class="smaller pink">
    <h2>Sign In</h2>
    <input>
  </div>
  <div class="bigger blue">
    <button>Back</button><button>Login</button>
  </div>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52