Question

I’ve got a floating div.
That div is nested inside an html element that recieves its height from one of its children.
How do I get my div to stick to the bottom?

Here’s a sample of my problem. I want to get my “Hello all” to the bottom of the parent.

<div style="overflow:hidden;border:1px solid green;clear:both">

<div style="float:left">
  <p> Hi All </p>      
</div>

<div style="height:150px;width:50px; background-color:red;float:left">
</div>

Answer 1

I put this together. Here’s the CSS:

#cont {
    margin:5px;
    overflow:hidden;
    border:1px solid green;
    clear:both;
}
#rel {
    height:150px;
    position:relative;
    display:inline-block;
    width:50px;
}
#abs {
    position:absolute;
    bottom:0;
}
#red {
    height:150px;
    width:50px;
    background-color:red;
    display:inline-block;
}

And your HTML:

<div id="cont">
    <div id="rel">
        <div id="abs">
            <p>Hi All</p>      
        </div>
    </div>
    <div id="red">
    </div>
</div>

I’m still using the position:relative/absolute trick, but instead of floating the divs, I’m making them inline-blocks. This way it has the same effect as when you float them.