Is there a way to position a div with height: 50px; inside another div with height: 100px; at the bottom of his parent?
turbHow about a 50px margin-top?Thank for replying
ok that's good but for the example i set the height: 100px; for the parent div...
But if i don't know the height of the parent??Well then I'd have to have a think for a while, I've never needed to do that so I don't know a quick fix off the top of my head. You could try:
margin-top:auto;
but that probably won't work.
Out of interest what do you want this for?To be short, i'm working on a layout that's always 100% height because i've got a footer div that i want always on the bottom of the page. These link will help you understand:
1. when there small content:
here (<!-- m --><a class="postlink" href="http://www.turbulencemedia.com/test.html">http://www.turbulencemedia.com/test.html</a><!-- m -->)
2. when there big content:
here (<!-- m --><a class="postlink" href="http://www.turbulencemedia.com/test2.html">http://www.turbulencemedia.com/test2.html</a><!-- m -->)
And for the question of the bottom positionning, it's for the white header(height: 10%
that contain the cyan and yellow div (both height: 50px
turb<div style="position:relative; height:100%; padding-bottom:50px;">
some content
<div style="position:absolute; bottom:0px; height:50px;">
bottom content
</div>
</div>
turbHow about a 50px margin-top?Thank for replying
ok that's good but for the example i set the height: 100px; for the parent div...
But if i don't know the height of the parent??Well then I'd have to have a think for a while, I've never needed to do that so I don't know a quick fix off the top of my head. You could try:
margin-top:auto;
but that probably won't work.
Out of interest what do you want this for?To be short, i'm working on a layout that's always 100% height because i've got a footer div that i want always on the bottom of the page. These link will help you understand:
1. when there small content:
here (<!-- m --><a class="postlink" href="http://www.turbulencemedia.com/test.html">http://www.turbulencemedia.com/test.html</a><!-- m -->)
2. when there big content:
here (<!-- m --><a class="postlink" href="http://www.turbulencemedia.com/test2.html">http://www.turbulencemedia.com/test2.html</a><!-- m -->)
And for the question of the bottom positionning, it's for the white header(height: 10%
that contain the cyan and yellow div (both height: 50pxturb<div style="position:relative; height:100%; padding-bottom:50px;">
some content
<div style="position:absolute; bottom:0px; height:50px;">
bottom content
</div>
</div>