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 1p开发者_开发百科x #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.
That will work... only thing is you won't be able to put anything in the empty top 60 pixels.
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?
加载中,请稍侯......
精彩评论