Menu
I have a really difficult CSS problem. I have the following layout (this is just a fast mockup in Paint):
I need to float the red box to the bottom of it's container. Normally I would use position: absolute; bottom: 0; but that results in the text overlapping with the div, which I don't want. I want the box to behave like in the second image (same situation, but with more text)
Is this even possible? I don't mind dumping support for very old browsers.
423
Don't abandon position: absolute. Simply add padding to the bottom of the container equal to the height of the footer div.
#outer{
position: relative;
padding-bottom: 55px;
}
#foot{
position: absolute;
height: 55px;
width: 100%;
bottom: 0;
left: 0;
}
Without padding: http://jsfiddle.net/cG5EH/2
With padding: http://jsfiddle.net/cG5EH/1
83
Try this. calc allows you to make calculations within your css. In the example I am forcing the height to be 100% but this can be any value it could even be height: calc(100% + 80px). Note the spaces around the maths operator.
see http://css-tricks.com/a-couple-of-use-cases-for-calc/ for more details
<html>
<header>
<style type="text/css">
.container{
height:100%;
padding-bottom: 80px;
box-sizing: border-box; //ensures the padding is part of the 100% height.
position:relative;
background-color: blue;
}
.base{
position:absolute;
top:calc(100% - 80px);/*80px arbitary height of the element*/
height:80px;
width:100%;
background-color: yellow;
}
</style>
</header>
<body>
<div class="container">
<div class="base">
sdfgsdfg
</div>
</div>
</body>
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
