Positioning a div near bottom side of another div

html css layout
Roman picture Roman · May 13, 2009 · Viewed 95.9k times · Source

I have outer div and inner div. I need to place inner div at the bottom of the outer one.

Outer div is elastic (width: 70% for example). I also need to center inner block.

Simple model of described make-up is shown on the picture below:

enter image description here

Answer

RichieHindle picture RichieHindle · May 13, 2009

Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
            height: 100px; position: relative;'>
    Outer
    <div style='background-color: green;
                position: absolute; left: 0; width: 100%; bottom: 0;'>
        <div style='background-color: magenta; width: 100px;
                    height: 30px; margin: 0 auto; text-align: center'>
            Inner
        </div>
    </div>
</div>
</body>
</html>

Live version here: http://jsfiddle.net/RichieHindle/CresX/

Related questions

CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More
Fixed Table Cell Width

A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how …

Read More