CODEWITHSUNDEEP
csshtmlcss-position
Rapti
Rapti

Reputation: 2662

Align div to bottom without removing it from the flow

I need to align a div to the bottom of the parent div. You might just tell me to use position: absolute; and bottom: 0px;, but I cannot remove the div from the flow.

My HTML markup looks like this:

<div class=parent>
    <div class=child>
        Lorem ipsum dolor sit amet
    </div>
</div>

The parent div has a dynamic height. Sometimes, it is just as high as necessary to show all of its content (height: auto;), but sometimes, it has a fixed height, which is smaller than the child's height. In that case, I want the child to reach outside the parent at the top edge. The child always has height: auto; to fit its content, which I also don't know at design-time.

What I have tried is using position: absolute; and bottom: 0px; on the child div, but this removes the child from the flow; thus, the parent div will fail to show its content while it has height: auto; active. I also tried using display: table-cell; and vertical-align: bottom; on the parent, but this seems to make it impossible to give it a height smaller than the content.

If nothing helps, I can still try a JS solution, but I'm sure this has to possible using plain CSS somehow, even if I need to modify my HTML and insert a wrapper div or something.

Upvotes: 4

Views: 457

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

How's this?

.parent {
    margin-top:-16px;
    background-color: gold;
    height: 88px;
    position:relative;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
    transition:1s all;
    z-index:-1;
}
.down {
    -webkit-transform:translateY(0);
    transform:translateY(0);
}

$(".header").click(function () {
    $(".parent").toggleClass('down');
});

Demo

You could hide the overflow above the header by using a container as well Demo

As Linek mention, browsers that don't support transforms would just show the content. In order to reach them without using a set height or taking them out of the flow, you have to over estimate the height of the element and use a negative margin-top. This demo should fix the problem in IE8

Upvotes: 2

Related Questions