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!