Take the following rather long example:
<html>
<head>
<style type="text/css">
.hump
{
position: static;
width: 400px;
}
.lala
{
position:relative;
background-color:blue;
width: 400px;
}
.hoho
{
position:absolute;
background-color:red;
left:0px;
top:0px;
width:50%;
}
.rofl
{
position:absolute;
background-color:blue;
left:0px;
top:20px;
}
</style>
</head>
<body>
<div class=hump>
<div class="lala">ewrio
<div class=hoho>lala</div>
</div>
<div class="lala">
<div class=hoho>lala</div>
<div class=rofl>hejhopp</div>
</div>
</div>
</body>
</html>
You have two options.
1. Add height attribute to lala (making it static height).
2. Write a javascript to dynamically change height of the area depending on how large content is. I'm currently working on this as I really want this solution.
There is probably a much better solution to this, so if you know of a better way, please let me know!
