I’m having trouble with putting my flexbox and grid to practice. The screenshot below is how my code is supposed to look. I’ve experienced with grids, positions, margin and padding but no matter what I do my positioning comes out botched. The most important keypoints are that
- The grey footer has to have position: fixed and sticks to the bottom of the browser, even when you would scroll!
- The upper blue square has to have position: relative;
- The lower green square has position: absolute; and is positioned relative to the
- Both larger squares contain a smaller square which also have position: absolute
This is my css code thusfar:
header {
height: 50px;
background-color: grey;
width: 1000px;
}
body {
display: flex;
justify-content: center;
flex-direction: column;
margin:auto;
padding:auto;
position:relative;
height: 100vh;
width: 100vh;
}
main {
flex: 1;
position: relative;
background-color: lightgrey;
display: flex;
justify-content: space-between;
}
footer {
height: 50px;
background-color: rgb(53, 53, 53);
width: 100%;
position: fixed;
bottom: 0;
}
.box {
width: 100px;
height: 100px;
position: relative;
}
.box-blue {
background-color: blue;
margin-top: 20px;
margin-left: 20px;
}
.box-green {
background-color: lime;
position: absolute;
bottom: 20px;
right: 20px;
}
.box-small {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 10px;
right: 10px;
}
Thanks in advance