ansaurus

Question

Answer 1

A:

You would probably would have to set the child div to have position: absolute.

Update your child style to

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Ravia 2010-01-06 17:55:23

i tried that, but what i need is the bottom of the childDiv to sit at the bottom of the parentDiv, the graph is to be dynamic, and the heights will vary from each childDiv to the next...positioning might work but i havent quit figured out something that is solid...

sia 2010-01-06 17:57:29

I have tried this and is working for me

Ravia 2010-01-06 18:03:52

not a good idea to set top to 207 (some arbitrary number) better to set bottom:0

pstanton 2010-01-06 18:06:58

Answer 2

+4 A:

You need to add this:

#parentDiv
{
  position:relative;
}
#parentDiv .childDiv
{
  position:absolute;
  bottom:0;
}

When declaring absolute element, he positioned according to his nearest-parent that is non-static (means: that is absolute, relative or fixed).

Y. Shoham 2010-01-06 17:59:51

Good point from *pstanton* below: you should add `left:0;` (or `right:0;`) as well; some browsers (Chrome+Safari?) may not understand this alone.

Y. Shoham 2010-01-06 18:24:40

Answer 3

+1 A:

this works (i only tested ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {height:300px; width:300px; background-color:#ccc; border:1px solid red;
            position:relative;}
        #child  {height:100px; width:30px; background-color:#eee; border:1px solid green;
            position:absolute; bottom:0; left:0;}
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

hope that helps.

pstanton 2010-01-06 18:05:31

Answer 4

A:

I noticed that you must specify the height of the child for this solution to work.

What if you have 2 or more children that you want to align to the bottom of the parent and the height of the children is predetermined by its contents? What solution would work for this type of situation?

tayls 2010-09-06 01:26:06

ansaurus

tags:

views:

answers:

Align DIV's to bottom or baseline

related questions