How to have absolute div fit parent width/padding? - html

Question

I need to have positioning set to absolute so I can have #bottom fixed at the bottom of the screen. I also need to have this fit the width/padding of the container #panel. When I set the position to absolute however, the width just fills the whole screen's width, how can I stop this? I need #bottom to fit inside the width/padding of #panel.
HTML:
<div id="panel">
<div id="bottom">
<div class="update"></div>
</div>
</div>
CSS:
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
#bottom {
position: absolute;
bottom: 20px;
width: 100%;
}
Above is an image of what's happening. Green is the padding and blue is the content area it should be fitting in (dark blue is the actual div (#panel) that I'm trying to fit in the content area). I'm assuming because it's absolute it's ignoring this, I'm looking for a way to get around this.
Fiddle: http://jsfiddle.net/qTJhW/
Thanks

Answer 1

The problem with what you are doing is that it is taking the the entire width including the padding and aligning it to the left side width the padding. You can fix this by using a wrapper with a relative position. Also don't forget to make the #panel position relative.
The code you end up with is something along these lines:
<div id="panel">
<div class="wrapper">
<div id="bottom">
<div class="update">
a
</div>
</div>
</div>
</div>
And the CSS:
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
box-sizing: border-box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
.wrapper {
position: relative;
height: 100%;
}
#bottom {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
background: yellow;
}
Here is an example:
http://codepen.io/DanielVoogsgerd/pen/Lezjy

Answer 2

You can use calc like this:
width: calc(100% - Padding)

Answer 3

You should only add another outer wrapper block with explicitly declare 'position: relative' then it will work.
In this case:
<style>
#outer {
position: relative;
width: 100%;
height: 100%;
}
</style>
<div id="panel">
<div id="outer">
<div id="bottom">
<div class="update"></div>
</div>
</div>
</div>
It will solve your problem.

Answer 4

add left:0px to your absolute id. it start form 0px with his relative id