11

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>

3 Answers 3

30

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.

1
  • I've used this . Thank you. and at the same time i want to align it in the center . How to do that ?
    – Jeeva J
    Mar 13, 2014 at 7:04
1

That will work... only thing is you won't be able to put anything in the empty top 60 pixels.

0

I believe that if you're looking for the best solution, you should indeed use relative/absolute positioning.

Is there any specific reason that you're trying to avoid relative/absolute positioning?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.