container div way bigger - html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<div class="container">
<div class="main">
</div>
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
<div class="content4">
</div>
<div class="subcontent">
</div>
<div class="footer">
</div>
</div>
</html>
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10px;
grid-row-gap: 5px;
background:#25523B;
}
.main {
grid-area: 1 / 1 / 2 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
.content1 {
grid-area: 2 / 1 / 6 / 2;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content2 {
grid-area: 2 / 2 / 6 / 3;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content3 {
grid-area: 2 / 3 / 6 / 4;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content4 {
grid-area: 2 / 4 / 6 / 5;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.subcontent {
grid-area: 6 / 1 / 7 / 5;
background-color: #77dd76;
border-radius: 25px;
}
.footer {
grid-area: 7 / 1 / 8 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
table {
font-family: Georgia, serif;
border: 6px solid white;
background-color: #D4EED1;
width: 100%;
text-align: center;
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
}
So the problem with this css is that my container div seems way bigger than my other div. So i would like to know if there is a way on how to keep the same div ratio between the other div so that it stays within the container div but must be filled.
As of now the other div are not going full screen even when the container div is.


you can change grid-template-column : repeat(4,1fr) or you can delete this grid-template-column
I have tried and it works
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10px;
grid-row-gap: 5px;
background:#25523B;
}
.main {
grid-area: 1 / 1 / 2 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
.content1 {
grid-area: 2 / 1 / 6 / 2;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content2 {
grid-area: 2 / 2 / 6 / 3;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content3 {
grid-area: 2 / 3 / 6 / 4;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.content4 {
grid-area: 2 / 4 / 6 / 5;
background-color: white;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
.subcontent {
grid-area: 6 / 1 / 7 / 5;
background-color: #77dd76;
border-radius: 25px;
}
.footer {
grid-area: 7 / 1 / 8 / 5;
background-color: #77dd76;
color:white;
font-weight: bold;
border-radius: 10px;
}
table {
font-family: Georgia, serif;
border: 6px solid white;
background-color: #D4EED1;
width: 100%;
text-align: center;
border-radius: 25px;
padding: 20px;
width: 200px;
height: 150px;
}
<div class="container">
<div class="main">
</div>
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
<div class="content4">
</div>
<div class="subcontent">
</div>
<div class="footer">
</div>
</div>

Related

Problem with responsivity of card in grid layout of css

[https://codepen.io/TA0011/pen/VwXKKgG]
When viewed in mobile version, the width of the card exceeds the Content hr (horizontal line). What can be done so that it does not exceed the horizontal line? Do not go with the 5 fr or 1fr unit. I can manage the 1 fr or 5fr scene. But only problem is with the card that exceeds the hr line which is blue in color.
.container-a {
margin-top: 10px;
width: calc(100% - 100px);
margin: 10px auto;
position: relative;
}
.container-a span {
background-color: #007bff;
padding: 5px 10px;
position: relative;
color: #fff;
z-index: -1;
background-blend-mode: multiply;
}
.container-a hr {
width: 100%;
color: #007bff;
margin-top: 4px;
height: 1px;
position: relative;
z-index: -2;
}
.container-a .wrapper {
display: grid;
height: 100%;
grid-template-columns: repeat(5, 1fr);
grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
grid-gap: 10px;
}
.container-a .blog-container {
grid-area: blog-container;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 10px;
}
.card {
min-width: 280px;
flex: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
height: 180px;
width: 100%;
border: 1px solid #ccc;
background: #FF7F50;
font-weight: 500 !important;
position: relative;
color: #fff;
}
.container-a .blog-sidebar {
grid-area: blog-sidebar;
}
.blog-sidebar .widgets {
background: #fff;
border: 1px solid #ccc;
margin-bottom: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 10px;
padding: 5px;
}
.widgets img {
width: 100%;
float: none;
display: block;
object-fit: fill;
}
.blog-sidebar h3 {
color: #007bff;
text-align: center;
margin-top: 2px 0 2px 0;
margin: -1px 0 -1px 0;
}
#media(max-width: 768px) {
.container-a {
width: calc(100% - 60px);
}
.container-a span {
font-size: 12px;
}
.container-a hr {
margin-top: 3px;
}
.container-a {
width: calc(100% - 60px);
margin-bottom: 100px;
}
.container-a .wrapper {
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas: "blog-container" "blog-sidebar";
}
.card {
min-width: 244px;
}
}
<section class="container-a" aria-label="blog-content">
<span>Content</span>
<hr>
<div class="wrapper">
<div class="blog-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
</div>
<div class="blog-sidebar">
<h3>Sidebar</h3>
<div class="widgets">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
</div>
</div>
</section>

[I have done it , you can view it][1]
[1]: https://codepen.io/TA0011/pen/ZExJgmr

Why my button is on back of my grid? How can I bring both of my button to front of the grid?

Hello I was trying to have a button for each pic in the grid but as you can see in the pic my first button is on the top of the grid but my second button is on back I want both button on front. I tried putting item1 after item2 and item3 and I also tried changing the class of the button but didnt work. I am a beginner so a beginner friendly answer is a plus :)
#import url('https://fonts.googleapis.com/css2?family=Mukta:wght#200&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
/* font-family: 'Mukta', sans-serif; */
:root {
--main-bg-color: #2874f0;
}
.grid1 {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 40px 100px auto;
grid-column-gap: 30px;
grid-template-columns: auto auto auto auto;
}
.items {
margin: 42px 59px;
display: grid;
justify-content: center;
align-items: center;
width: 372px;
height: 47px;
font-size: 36px;
background-color: black;
color: white;
font-family: 'Oswald', sans-serif;
}
.box {
display: grid;
/* background-color: yellow; */
height: 56vh;
/* grid-row-gap: 2px;
grid-column-gap: 9px; */
/* grid-gap: 2px 9px; */
/* grid-gap: 9px; */
/* grid-template-columns: 34px 334px auto;
grid-template-rows: 44px 84px; */
grid-template-columns: 500px 500px 500px;
grid-template-rows: 500px 500px 500px;
justify-content: center;
width: 80vw;
margin: 0vh 10vw;
}
.btn {
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
}
#btn2 {
margin: 0px 0px 0px 0px;
}
/* .btn2{
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
} */
.item {
background-color: aquamarine;
border: 2px solid red;
}
.item1 {
background-image: url("minar.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
grid-column: 1/3;
grid-row: 1/3;
}
.item2 {
background-image: url("quaid.JPG");
height: 100%;
background-size: cover;
border: 2px solid red;
}
.item3 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Badshahi_Mosque_front_picture.jpg/1200px-Badshahi_Mosque_front_picture.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
}
.heading {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header>
<div class="grid1">
<p class="items">Home</p>
<p class="items">Contact</p>
<p class="items">About</p>
<p class="items">Products</p>
</div>
</header>
<main>
<div class="container">
<h1 class="heading">Places to visit in Pakistan</h1>
<div class="box">
<div class="item1">
<button class="btn">Learn More → </button>
</div>
<div class="item2"> <button class="btn">Learn More → </button></div>
<div class="item3">3</div>
</div>
</main>
<footer>
</footer>
</body>
</html>

You need to give:
.btn{
position: relative;
}
This will solve your problem. Both buttons will come in front of the image.

You need to use the z-index property in CSS. U need to put z-index: 1 to all button and z-index: 0 to all items. I have demonstrated it on the item3. Also why don't you use ID for item1, item2 and so on? And put some common class on all of them
#import url('https://fonts.googleapis.com/css2?family=Mukta:wght#200&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
/* font-family: 'Mukta', sans-serif; */
:root {
--main-bg-color: #2874f0;
}
.grid1 {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 40px 100px auto;
grid-column-gap: 30px;
grid-template-columns: auto auto auto auto;
}
.items {
margin: 42px 59px;
display: grid;
justify-content: center;
align-items: center;
width: 372px;
height: 47px;
font-size: 36px;
background-color: black;
color: white;
font-family: 'Oswald', sans-serif;
}
.box {
display: grid;
/* background-color: yellow; */
height: 56vh;
/* grid-row-gap: 2px;
grid-column-gap: 9px; */
/* grid-gap: 2px 9px; */
/* grid-gap: 9px; */
/* grid-template-columns: 34px 334px auto;
grid-template-rows: 44px 84px; */
grid-template-columns: 500px 500px 500px;
grid-template-rows: 500px 500px 500px;
justify-content: center;
width: 80vw;
margin: 0vh 10vw;
}
.btn {
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
z-index: 1;
}
#btn2 {
margin: 0px 0px 0px 0px;
}
/* .btn2{
width: 1000px;
height: 90px;
color: white;
background-color: var(--main-bg-color);
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
font-family: 'Smooch Sans', sans-serif;
font-size: 68px;
margin: 912px 0px 0px 0px;
} */
.item {
background-color: aquamarine;
border: 2px solid red;
}
.item1 {
background-image: url("minar.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
grid-column: 1/3;
grid-row: 1/3;
z-index: 0;
}
.item2 {
background-image: url("quaid.JPG");
height: 100%;
background-size: cover;
border: 2px solid red;
z-index: 0;
}
.item3 {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Badshahi_Mosque_front_picture.jpg/1200px-Badshahi_Mosque_front_picture.jpg");
height: 100%;
background-size: cover;
border: 2px solid red;
}
.heading {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<header>
<div class="grid1">
<p class="items">Home</p>
<p class="items">Contact</p>
<p class="items">About</p>
<p class="items">Products</p>
</div>
</header>
<main>
<div class="container">
<h1 class="heading">Places to visit in Pakistan</h1>
<div class="box">
<div class="item1">
<button class="btn">Learn More → </button>
</div>
<div class="item2"> <button class="btn">Learn More → </button></div>
<div class="item3">3</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
EDIT I just realized that I put the z-index: 0; on item 2 and item1 but it applying to item3 too. I dont know why...

Buttons on calculator app are going outside their div parents

I am building this calculator, which made me go insane this afternoon. I am using for the first time Grid, till now I only used flex-box...
The problem is that the buttons are going outside the div (calculator). I am building this mainly for mobile. On the mobile simulator on Chrome looked perfect, but as soon as I uploaded it and looked on it on my phone, the buttons are going WAY outside the div...I've build dozens test websites and never had this problem, everything stayed where shoul've been staying.
What am I doing wrong? I've been here for 2 hours trying to make it work and I beggining to feel stupid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
height: 80vh;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,225,225);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 25%;
margin: auto;
margin-top: 5.5%;
background: white;
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border:3px solid red;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
border:3px solid black;
}
.top {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
}
.color {
background: rgba(0,200,197,.3);
}
button:active {
transform: scale(.95);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="colorc">C</button>
<button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>

I found it.
I removed the height from .calculator, gave height: 120px; to .output and added padding: 30px 0; to .keyboardparent.
Thank you for the previous solutions, I didn't think the height of the .calculator set in vh could do some damage.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,215,215);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 120px;
margin: auto;
margin-top: 5.5%;
background: rgba(180,200,180);
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 30px 0;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
}
.top {
display: grid;
grid-template-columns: 1.5fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
text-align: center;
vertical-align: ;
}
.color {
background: rgba(0,200,207,.3);
}
button:active {
transform: scale(.95);
}
.clearall {
background: rgba(255,0,50,.7);
}
.cancel {
background: rgba(255,0,0,.5);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="clearall">C</button>
<button class="cancel"><img src="delete.svg" class="delete" width="23px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color equal">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>

height of .calculator the unit vh to % that is
change this
.calculator{
height: 80vh;
}
to
.calculator{
height: 80%;
}
like this height: 50px; to .output instead of height:25%
Also added a margin-bottom to .keyboardparent
.keyboardparent { margin-bottom: 5.5%;} // you already given margin-top: 5.5%; to output
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
height: 80%;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,225,225);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
top:10px;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 50px;
margin: auto;
margin-top: 5.5%;
background: white;
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border:3px solid red;
margin-bottom: 5.5%;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
border:3px solid black;
}
.top {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
}
.color {
background: rgba(0,200,197,.3);
}
button:active {
transform: scale(.95);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="colorc">C</button>
<button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>

How to make CSS Sticky work with Flex issue [duplicate]

I have an HTML structure where I can't seem to get the CSS position sticky working.
I think it because it's within the aside container. If I make aside stick it works.
I want the .product-info div to be sticky and when it hits the div .content-other it unsticks.
Unless with flex I could move out .personal-info and .product-info from within the aside and have them sit to the right on top of each other? Like
content | Personal info
| Product info
Then not bother having the wrapping aside? Not sure how to stack these like this though with flex.
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
align-self: flex-start;
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>
Cheers

Simply remove align-self: flex-start;
body {
padding: 20px;
}
.container {
margin-left: auto;
margin-right: auto;
position: relative;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
display: flex;
}
.content {
position: relative;
max-width: 100%;
flex-basis: 74%;
border: 1px solid black;
width: 300px;
margin-right: 20px;
height: 540px;
}
.right-side {
/*align-self: flex-start;*/
background-color: #ffffff;
border: 2px solid #e8e8e3;
border-radius: 0 4px 4px 4px;
flex: 1 1;
flex-basis: 40%;
min-width: 338px;
padding: 16px 16px 0;
display: block;
width: 400px;
}
.personal-info {
height: 250px;
}
.product-info {
position: sticky;
position: -webkit-sticky;
top: 24px;
border: 1px solid red;
}
.content-other {
width: 100%;
background: #f5f5f5;
height: 400px;
}
<div class="container">
<div class="content">content area here</div>
<aside class="right-side">
<div class="personal-info">some info</div>
<div class="product-info">sticky info</div>
</aside>
</div>
<div class="content-other">.product-info unsticks when it hits here</div>

how to make a div display-flexible

how should I change the following css code to make it monitor flexible with 1% distance with the footer and header.
#main {
margin: 1%;
padding: 0%;
height: 50%;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 3px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 3px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 2;
order: 2;
}
footer {
margin-top: 1%;
background: #eebb55;
color: #000;
width: 100%;
padding-bottom: 1px;
position: absolute;
text-align: center;
bottom: 0;
left: 0;
}
<header>
<ul>
<li><b>Home</b>
</li>
<li><b>Google</b>
</li>
<li><b>Reserve</b>
</li>
</ul>
</header>
<div id='main'>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>copyright by xxx</footer>
http://www.codeshare.io/fFS2t

Assuming you mean that the main div should have 1% distance to the header and footer you could use this: (Requires CSS3)
body {
margin: 0;
padding: 0;
}
#wrapper {
background: yellow;
height: 300px; /* Can be any value */
width: 100%;
}
header {
background: red;
height: 40px;
width: 100%;
}
#main {
background: green;
height: calc(100% - 80px - 2%); /* 80px = Header and footer height */
margin: 1% 0px;
width: 100%;
}
footer {
background: navy;
height: 40px;
width: 100%;
}
<div id="wrapper">
<header>
Header
</header>
<div id="main">
Main
</div>
<footer>
Footer
</footer>
</div>