Jump to content

How to apply negative margin -top?


newcoder1010
 Share

Recommended Posts

Hello,

HTML:

<div class="col-md-6 col-lg-6 col-xs-12 col-sm-6">
<div class="field1">  <img src="/sites/default/files/2020-10/plumbing-dc_1.png" width="100%" alt="Your Plumbing" class="img-responsive"></div>
<div class="footer"><h2>YOUR COMPANY NAME WHO WE ARE SUMMARY GOES HERE </h2></div>
</div>

I like to place the footer element on the bottom of the field1 class. Below css works except for the background color. I do not see the bg color. I can see the bg color if I remove the margin-top.

.footer {
    background: red;
    z-index: 2;
    margin-top: -80px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Please advise!

Link to comment
Share on other sites

3 hours ago, newcoder1010 said:

.footer { background: red; z-index: 2; margin-top: -80px; width: 70%; margin-left: auto; margin-right: auto; }

Hi, Good Morning.

You should use the margin-bottom for it. 

For the project, you should not use the negative margin-padding because it's bad habit and it's difficult to understand for other.

Hope you get it.

Thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...