CODEWITHSUNDEEP
css
akonsu
akonsu

Reputation: 29536

trying to vertically align div inside div

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>

Upvotes: 11

Views: 13983

Answers (3)

S.Jones
S.Jones

Reputation: 1155

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?

Upvotes: 0

Jasper
Jasper

Reputation: 11908

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.

Upvotes: 30

Dutchie432
Dutchie432

Reputation: 29160

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

Upvotes: 1

Related Questions