1 reply [Last post]
symeon.mattes
symeon.mattes's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Joined: 2012-01-26
Posts: 1
Points: 2

Hi I have the following html elements

<div class="container">
    <div class="child child1">chld 1<div>
    <div class="child child2">chld 2<div>
   <div class="child child3">child 3<div>
</div>

what I would like to take is the following:

+-----------------------+
| container             |
|  +------+   +------+  |
|  | chld |   | chld |  |
|  |   1  |   |   2  |  |
|  |      |   |      |  |
|  +------+   +------+  |
|       +------+        |
|       | chld |        |
|       |   3  |        |
|       |      |        |
|       +------+        |
+-----------------------+

All elements are supposed to have absolute position, not float. The reason is that I would like each child to be draggable. Moreover the height of each child is unknown.

What I have used is:

.container{background:#eee;position:relative}
.chld{position:absolute;width:50px;}
.child1{top:0px; left:0px}
.child2{top:0px; left:200px}
.child3{top:40px; left:100px}

However the height of the container is becoming zero, which is reasonable. Is there any tricky way in css, the height of the container to be adjusted according to the unknown height of the children, or should I use javascript? Moreover, I would like when I drag child 3 downwards the height of the container to be adjusted accordingly.

Thanks in advance

tjroberts086
tjroberts086's picture
Offline
Enthusiast
Last seen: 1 week 4 days ago
Timezone: GMT-5
Joined: 2010-01-08
Posts: 135
Points: 173

you have child mispelled,

you have child mispelled, wheres the rest of the CSS?