CODEWITHSUNDEEP
csshtml
Tina
Tina

Reputation: 527

Negative margin bottom to footer doesn't work

I'm trying to move the footer down 50px to go outta screen, but the negative margin doesn't work (nothing is moving) and I'm not quite sure why...

footer {
  background: #111;
  padding: 50px 0 100px;
  text-align: center;
  margin-bottom: -50px;
}

Here's an example 

body {
  background: white;
  margin: 0;
}

section {
  height: 100vh;
}

footer {
  background: green;
  padding: 50px 0 100px;
  text-align: center;
  color: white;
  margin-bottom: -50px;
}
<body>

  <section>
    Section 1
  </section>

  <section>
    Section 2
  </section>

  <footer>
    <div>
      some content here
    </div>
  </footer>

</body>

Upvotes: 1

Views: 1559

Answers (5)

SeReGa
SeReGa

Reputation: 1330

If I understood your question right, you want a footer to be half hidden from the view.

If so, try to use fixed position, add this to your css:

position: fixed;
bottom: -50px;

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 274384

Negative margin is working fine but it's not doing what you are expecting. negative margin-bottom will not make the element to move outside. It will make the parent element to shrink instead.

Here is a simplifed example:

.box {
  border:5px solid #000;
}
.box div{
  background:red;
  height:200px;
  margin-bottom:-50px;
}
<div class="box">
  <div></div>
</div>

As you can see the parent element has a height less than its child due to negative margin and we are having an overflow.

This is what is happening in your case, and since the overflow is by default scroll you will keep seeing the footer. Add some border and you will better see:

body {
  background: white;
  margin: 0;
  border:2px solid;
}

section {
  height: 100vh;
}

footer {
  background: green;
  padding: 50px 0 100px;
  text-align: center;
  color: white;
  margin-bottom: -50px;
}
<section>
    Section 1
  </section>

  <section>
    Section 2
  </section>

  <footer>
    <div>
      some content here
    </div>
  </footer>

In order to hide the overflowing part, simply adjust the overflow property and you will have what you want:

html {
 overflow:auto;
}

body {
  background: white;
  margin: 0;
  border:2px solid;
  overflow:hidden;
}

section {
  height: 100vh;
}

footer {
  background: green;
  padding: 50px 0 100px;
  text-align: center;
  color: white;
  margin-bottom: -200px;
}
<section>
    Section 1
  </section>

  <section>
    Section 2
  </section>

  <footer>
    <div>
      some content here
    </div>
  </footer>

As you can see, I have added a bigger negative margin to shrink more the body element and to make all the footer outside then I hide it using overflow:hidden

Upvotes: 3

Waqar Ahmed
Waqar Ahmed

Reputation: 121

use transform instead of margin footer {transform: translateY(-50px);}

Upvotes: 0

dado
dado

Reputation: 54

For positioning use position and top/bottom/left/right. For example

position: relative;
bottom:50px;

Upvotes: -1

Szekelygobe
Szekelygobe

Reputation: 2705

If you are using Firefox, try hitting the F12 button for the Web Developer tool. In the inspector tab you can inspect the element and set the css rules for that element.

Probably you have some kind of conflict with rules declared somewhere else. You can change live the css for testing in the Web Developer -> Inspector -> Stiles.

Upvotes: -1

Related Questions