onsdag 27 augusti 2008

Tired of Javascript/CSS

CSS is not my strong side, actually web development isn't at all, yet I have this bad habit of wanting to learn things I don't know since before. That being said, not sure if i got this right. Putting an absolute object (div for example) inside a relative object makes for an unhappy combination. Problem is that the outer container does not resize for the absolute object (depending on how you interpret the standards, I guess this is correct behaviour).

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!