While working on a website layout, I usually divide it into sections: header, content, and footer. However, when I try to create more space between my content/login section and the header, I encounter some issues...
If I simply apply margin-top: 100px;
to content
or login
, it also pushes down my
footer</code, which is not desired. How can I move my <code>login
down without affecting the position of my footer
?
In the image provided, you can see that there is already sufficient space in the content for the login section to move downwards.
/* CSS code snippet */
Body {
margin: 0;
background-image: linear-gradient(to right, #0098d9, #0098d9 49%, #ed1b24 49%);
font-family: Verdana;
}
.MainDiv {
width: 80%;
min-height: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.header {
text-align:center;
margin:0px auto;
width: 100%;
height: 20%;
}
.content {
margin-top: 0px;
margin-bottom: 0px;
height: 65%;
}
.footer {
height: 15%;
text-align: center;
}
.login {
width: 30%;
height: 30%;
margin-left: auto;
margin-right: auto;
background: #0098d9;
border: 0.1em solid #0098d9;
border-radius: 1em;
text-align: center;
}
/* HTML structure */
...