The margin-top property is causing my footer to shift downward

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 */
...

Answer №1

To resolve your issue, follow these 2 steps:

Start by including this rule at the beginning of your CSS file: * { box-sizing: border-box; }. This will ensure that padding does not impact the dimensions of your elements.

Next, apply the necessary padding to the .content class instead of using margin. This adjustment should solve your problem :)

Answer №2

Try using padding instead of margin

Modify the CSS for the .content class ...it should do the trick

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
{
padding : 25% ;
height: 65%;
}

.footer
{
height: 15%;
text-align: center;
font-size: 12px;
}
.login
{
width: 30%;
height: 30%;

margin-left: auto;
margin-right: auto;
background: #0098d9;
border: 0.1em solid #0098d9;
border-radius: 1em;
text-align: center;
}
<body>
<div class="menu">
Menu:<br />
<a href="Overview.php">Machine pages</a>
</div>
<div class="Maindiv">
<div class="header">
logo here

</div>
<div class="content">
<form action="Index.php" method="post" enctype="multipart/form-data">
<div class="login">
<table class="loginTable">
<tr>
<td align="center" colspan="2">Admin login</td>
</tr>
<tr>
<td width="10px"><img class="icon" src="images/User.png"></td>
<td><input type="text" name="Username" placeholder="Username"</td>
</tr>
<tr>
<td><img class="icon" src="images/locked.png"></td>
<td><input type="password" name="Password" placeholder="Password"></td>
</tr>
<tr>
<td colspan='2' align="right"><input type="submit" name="Login" value="Login"></td>
</tr>
</table>
</div>
</form>
<p class="errorMessage"><?php echo $message;?></p>

</div>
<div class="footer">
Machinefabriek van de Weert B.V. <br />
W: <a href="http://www.vandeweert.nl">www.vandeweert.nl</a><br />
T: +31 (0)492-549 455
</div>
</div>
</body>

Answer №3

The reason for this issue is that you applied a percentage of the total height to each element. When you add a space before certain elements, their height will be preserved while causing other elements to shift downward.

An alternative solution is to utilize padding in place of margin. Padding creates space within the element and determines the distance between its boundaries and content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The style of a button element is lost when hovering over it after the background color has

This question is related to CSS. If you look at this example, you will see a button with two span elements inside. One using float:left; and the other using float:right;. The button has a typical button-style, but when clicked on an iPhone or hovered over ...

When the li is clicked, replicate it and display it in a separate div

When a list item is clicked, I want to clone it and display it in a separate div. If another list item is clicked, the previously displayed item should be replaced with the newly clicked one. Below is my code along with a link to the codepen where you can ...

Is there a way to automatically redirect the main html page to a different html page upon logging in?

I have created a main page in HTML with a login box that displays a message saying "Login successful" or "Login failed" based on whether the password entered is 8 characters or more. The validation function for this works correctly, but after successfully ...

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

Struggling to display the Three.js LightMap?

I'm having trouble getting the lightMap to show on my mesh. Here's the code I'm using: loader.load('model.ctm', function (geometry) { var lm = THREE.ImageUtils.loadTexture('lm.jpg'); var m = THREE.ImageUtils.loadT ...

Automatically transfer images to a designated folder using PHP

I am just starting out in web development. I have a vision of creating a webpage with a photo gallery. Below is the initial code snippet: <body> <div class="container"> <header class="clearfix"> </header> ...

modify the inherent CSS property

I am working with a component that I have inherited, including its CSS style, and I need to modify one of its properties. Current CSS: .captcha-main-image { width: 100%; height: auto; } <img class ="captcha-main-image" id="captchaImage" src= ...

The background failed to display (potentially due to a hovering function)

I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

I'm currently working on incorporating a PHP function into my HTML file using Ajax (which also contains JavaScript). My goal is to retrieve all locally stored JSON files. I've been following a guide at , but I'm facing some challenges. When ...

"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...

Table with a dynamic image background that seamlessly adjusts to full width while maintaining its original aspect ratio

I am currently facing an issue with a table that has a background image. I want the background image to span 100% of the width of the div container and automatically adjust its height while maintaining its aspect ratio. #pitch{ background-color: d9ffd9 ...

How to stop Bootstrap collapsible items from "shifting"

I recently integrated a Bootstrap collapse plugin to manage my list of common inquiries: https://jsfiddle.net/2d8ytuq0/ <ul class="faq__questions"> <li> <a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a> ...

What could be causing the issue with ng-include not functioning properly?

Issue with ng-include Organized Directory Structure : ssh_project --public ----templates ------header.html ------footer.html ----views ------index.html Here is the content of my index.html file <body> <h1>Hello</h1> <div ng ...

How can I automatically disable the button after resetting the form's state?

This form has a feature where the submit button is disabled until all form fields are complete. Once the submit button is clicked, preventDefault() function runs and an alert pops up. However, after closing the alert, the form resets but the button state r ...

"Streamlining data entry with an uncomplicated HTML form input that accepts multiple values from a

As I understand it, a barcode scanner functions as nothing more than a keyboard that transmits keycode 13 after each scan. My task is straightforward: I have a basic form with only one input field and I want the ability to scan numerous barcodes and then c ...

What is the best way to incorporate custom styles in CKEditor with the help of the Custom drop

I recently implemented a plugin that provides me with the code needed to create a dropdown menu on my CKeditor toolbar. This dropdown menu contains various styles that can be applied by clicking on them. Here is the code snippet: CKEDITOR.plugins.add( &ap ...

Is it possible to choose tags from a different webpage?

Imagine you have a page named a.html which contains all the jQuery code, and another page called b.html that only includes HTML tags. Is it feasible to achieve something like this: alert( $('a').fromhref('b.html').html() ); In essence ...

Crafting a unique datalist from an XML file with the help of jQuery

<mjesta> <mjesto>Zagreb</mjesto> <mjesto>Split</mjesto> <mjesto>Ploce</mjesto> <mjesto>Pula</mjesto> <mjesto>Pazin</mjesto> <mjesto>Daruvar</mjesto> <mjesto>Bjelovar</mj ...

Create a dynamic and adaptable Google Maps experience without the need for an iframe

For instance, if you are using an embedded Google Map. You can ensure that your Google Map is responsive with the following code: Using iframe (simple iframe) <div class="ggmap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m ...

Proper HTML style linking with CSS

Describing the file structure within my project: app html index.html css style.css The problem arises when trying to link style.css as follows: <link rel="stylesheet" type="text/css" href="css/style.css"/> S ...