A while ago I have searched for a solution to place a <div> element inside another <div> element always bottom. There are many solutions to put the div bottom from the whole html site but rar solutions to put it in the container div bottom.
Now here comes my solution …
I have one div container (calling it simple container) with a height of 100% (this container itself is placed for example in another parent container which has a height of 400px). And I have my div which should placed bottom of the container:
<div id="container" style="height:100%; position:relative;"> <div id="bottom_div" style="height:10%; position:absolute; bottom:0px;"/> </div>
The trick is to give the container div a position relative and then you can use the position absolute in the bottom div element. If the container div has no position style atribute it will not work.
Thanks so much
perfect tip
Kommentar von Miles — Juli 17, 2008 @ 1:36 |
thanx for this tuto, you are the men
thanx
CSS rules men
Kommentar von afperea — Februar 21, 2009 @ 9:41 |
I couldn’t get this working under IE 6/7. Are you sure this is the right solution? Box is always in the top left for me.
Kommentar von widmo — März 12, 2009 @ 2:23 |
Cool mate,
That works fine.
Kommentar von Nico — März 25, 2009 @ 1:51 |
Thanks!!
Kommentar von Jakob — April 17, 2009 @ 6:32 |
It does not work under IE6/7
Kommentar von Dickwan — August 31, 2009 @ 11:57 |
Hmm … strange. We are using in our projects this solution for IE6/7 and firefox 2/3 without problems.
You can check if your div containers not inside other block elements which have a position.
Kommentar von Thomas Wabner — September 1, 2009 @ 10:57 |
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
Kommentar von sandrar — September 10, 2009 @ 8:52 |