janf 0

Lets say c1 is 200px high, then the parent div should scale dynamically to 200px, without fixed height. Both, c1 and c2 should be aligned at the bottom.

c1 and c2 should also scale dynamically in height by their content...

I guess absolute alignment is not possible, cause then i would have to apply a fixed size to the parent div. The solution must work in ie>7, ff>2 and Safari... Any Ideas?

+--------------------------[parent div]-+
|  +-[c1]-----------+                   |
|  |                |                   |
|  |                |  +-[c2]--------+  |
|  |                |  |             |  |
|  |                |  |             |  |
|  +----------------+  +-------------+  |

3 answers


The only option that comes to mind is to use javascript. I don't think it is possible to do this with CSS only. It might be, but not that I am aware of.

I would use javascript to get the height difference in pixels of c1 and c2 and then give c2 a margin-top of that difference. Using a javascript library like jQuery would make selecting the elements and applying the new style easier.

Answered over 8 years ago by Abinadi Ayerdis

If c1 is always the tallest or c2 is always the tallest then it is pretty easy to do with CSS alone (I just tested it with safari/chrome/ff/ie7-9). If it is random, based on content, which will be the tallest then you'll need a little javascript to help you out.

If using JS is okay with you, let me know and I can point you in the right direction.

Answered over 8 years ago by Rob Flynn

All you need is a position: relative; on the container, and a position: absolute; on the #c2 div. Then you can use bottom and right on #c2 to position it in the bottom of the container and make it stay next to the #c1 div.

Example: http://jsfiddle.net/44vCn/

Answered over 8 years ago by Stephan Muller