CODEWITHSUNDEEP
htmlcss
Mark
Mark

Reputation: 2001

Absolute positioning ignoring padding

I am trying to position a div with buttons at the bottom of a parent div that has a padding.

current result

The expected result is having the button resting on top of the padding (green area).

.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none;
  /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}
a,
a:focus,
a:hover {
  color: #fff;
}
body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("../img/blank.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
html,
body {
  height: 100%;
}
body {
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#mcontainer {
  position: relative;
  float: left;
  padding: 10%;
  width: 100%;
  height: 100%;
}
#header h1 {
  margin: 0px;
}
#header {
  height: auto;
}
#footer .link-item a {
  display: table-cell;
  padding: 10px 10px;
  border: 2px solid white;
}
#footer {
  position: absolute;
  top: auto;
  bottom: 0%;
  height: auto;
}
#footer .link-item:first-child {
  border-spacing: 0px 10px;
  margin: 10px 10px 10px 0px;
}
#footer .link-item {
  border-spacing: 0px 10px;
  margin: 10px 10px;
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div id="mcontainer">

    <div id="header">
      <h1>Text</h1>
    </div>

    <div id="footer">
      <span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
      <span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
      <span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
      <span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
      <span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
    </div>

  </div>
</body>

</html>

Any help would be appreciated.

Upvotes: 17

Views: 21285

Answers (2)

A.Sharma
A.Sharma

Reputation: 2799

You have two issues here:

First Issue

Your buttons are absolute but the first parent element that has a relative positioning is the mcontainer element. Thus, the buttons will only be absolute to this element.

Remove position:relative from the mcontainer element, and set the body element to have relative positioning.

Second Issue

As Turnip had pointed out, padding doesn't get taken into account for absolute positioning. Thus, offset this by setting a negative bottom and left styling to the button container.

See the fiddle: https://jsfiddle.net/6smpvqq8/1/

Upvotes: 3

Daniel Diekmeier
Daniel Diekmeier

Reputation: 3434

Absolute positioning does not take padding into account. A possible solution would be to add another container inside .mcontainer, that also has position: relative. That way, the inner container would respect the padding, and the absolute positioned element would be at the bottom of the inner container.

Upvotes: 30

Related Questions