Menu
I am trying to position a div with buttons at the bottom of a parent div that has a padding.
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.
792
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.
172
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/
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
