Absolutely positioned element with width 100% overflowing relative width
parent
I would like my absolutely positioned element to:
be positioned always at the bottom of the container element.
span across the whole container element.
not span over the padding of the container element.
the container div has a % based width.
You can see my problem here: http://jsfiddle.net/vTuTv/2/
<div class="container">
<div class="line"></div>
</div>
.container {
min-height: 200px;
width: 50%;
background-color: #3e3e00;
position: relative;
padding-left: 15px;
padding-right: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.line {
background-color: #003e3e;
position: absolute;
bottom: 0;
height: 22px;
width: 100%;
}
obviously if the element wasnt absolutely positioned then i could just use
box-sizing on the parent element.
No comments:
Post a Comment