How to place div at the bottom of another div?

Question

How do I place the adInfoBox1 at the bottom of the container?

Take a look at this: http://jsfiddle.net/snowman/hxXJh/

Please note that the container will not have a fixed height.

Answer 1

You can use position: absolute.

.container
{
    height: 400px;
    position: relative;
}

.adInfoBox1 {
  padding: 5px 5px 5px 10px;
  position: absolute;
  bottom: 0px;
  width: 457px;
  background-color: green;
}

.adRegularList .categoryList {
  bottom: 0;
  height: 16px;
  position: absolute;
}

See a working example here: http://jsfiddle.net/hxXJh/5/

Answer 2

I'd suggest:

.adInfoBox1 {
    padding: 5px 5px 5px 10px;
    position: absolute;
    bottom: 0; /* attaches the element to the bottom */
    left: 0; /* attaches the element to the left-side */
    right: 0; /* attaches the element to the right-side */
    background-color : green;
}

The above will give the .adInfoBox 100% width, implicitly. This can be adjusted by removing, or amending, the right or left declarations. I removed the float because using position: absolute; will take the element out of the document flow anyway.

JS Fiddle demo.

Answer 3

Simple tricky solution. Div2 will be at the bottom of containerDiv.

<div id="containerDiv">
   <div id="div1" style="heigth:90%;"></div>
   <div id="div2">Content here...</div>
</div>