trying to align vertically div in div

advertisements

i am trying to vertically align a div inside another div at the bottom and i do not want to use relative/absolute positioning. below is my markup. it seems to work. but i am not sure whether this is the best solution. can anyone recommend a better way? also, in FF if i remove the border around the container, it stops working. does anyone know why? thanks konstantin


<html>
<head>
    <style type="text/css">
        .container
        {
            background-color: #ffff00;
            height: 100px;
            line-height: 100px;
            border: solid 1px #666666;
        }
        .container .content
        {
            margin-top: 60px;
            background-color: #ffbbbb;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">test</div>
    </div>
</body>
</html>


Do use absolute positioning. I think it is probable that the reason you do not want to use absolute positioning is based on a misconception. Namely, if the container has the position attribute as well, absolute positioning will not be in regard to the whole page, but in regard to the container, and then you will get what you want with:

.container
{
    position: relative;
}

.container .content
{
    position: absolute;
    bottom: 0px;
}

Now, no matter the sizes, your content will be will be at the bottom of the container.