Position a div to bottom left

Question

How to move the inside div sqrBall to the bottom left of the parent div container. Here is the HTML code:

<div class="container">
    <div class="sqrBall">

    </div>
</div>

Here is the CSS:

.container{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 0 auto;
    }
    .sqrBall{
        width: 10px;
        height: 10px;
        background-color: blue;

    }

Here is a DEMO

Answer 1

You can use absolute positioning on the inner element if the parent element has relative positioning. for example:

.container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    margin: 0 auto;
    position:relative;
}

.sqrBall{
    width: 10px;
    height: 10px;
    background-color: blue;
    position:absolute;
    bottom:0;
    left:0;
}

n.b. if the parent isn't positioned relatively, the inner element will be positioned to the bottom left of the body, not its parent. (at least in this example)

Answer 2

try this demo Fiddle

.sqrBall {
width: 10px;
height: 10px;
 background-color: blue;
 position: absolute;
 top: 98%;
 left: 0;
   }
.container
{
position:relative;
}