Menu
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>
942
To align two <div> elements vertically in Bootstrap 3, you can try using the CSS Flexible Box Layout. In the example below, we display the needed row as a flex container box with the CSS display property and then, align the flex-items (columns) vertically with the align-items property.
Use the position property with the “relative” value for the parent element to place it relative to its normal position. Use the position property with the “absolute” value for the child element to place it relative to its positioned parent element. Add the height, margin-top, top, border, and width properties.
right are positioned absolutely with top: 50% and use margin-top: -0.8em to get vertical centering (use one-half of line-height value). Use the left and right offsets (or padding) to adjust the child elements horizontal position as needed.
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.
151
That will work... only thing is you won't be able to put anything in the empty top 60 pixels.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
