CODEWITHSUNDEEP
htmlcss
J-LO
J-LO

Reputation: 229

Margin-top pushes entire div down rather than just single element

I'm trying to create a button that is at the bottom of the div that I've created, however, once I use margin top on the element, it moves everything including the container that the button (element) is in too.

Here's what I have so far:

.background{
    position: relative;
    width: 450px;
    height: 564px;
    background: url(http://placehold.it/450x564) no-repeat;
}
.verify{
    color: #ffffff;
    position: relative;
} 
.link{
    margin: 425px 0px 0px 80px;
    background: url(http://placehold.it/300x41) no-repeat;
    width: 384px;
    height: 51px;
    position: relative;
}

and html:

<div class="background">
      <p class="verify">Confirm your email by following the link below:</p>
      <div class="link"> 
        </div>
</div>

So basically I want the background class to be static while all the elements within the container to move freely when adjusting margins on them. Any ideas?

Upvotes: 1

Views: 558

Answers (1)

RienNeVaPlu͢s
RienNeVaPlu͢s

Reputation: 7632

As War19ck recommends inside the comments to your question, you should position the child element (.link) absolute to its parent (.background):

.link {
    position: absolute;
    bottom:80px;
    left:33px;
    background: url(http://placehold.it/300x41) no-repeat;
    width: 384px;
    height: 51px;
    border:1px solid red;
}

Notice:

  • I removed the padding!
  • You already set the parents position to relative (required)

Fiddle

Upvotes: 3

Related Questions