Dynamically setting a absolute DIV with a Dynamic Height? - html

Question

Please see the following: http://jsfiddle.net/GWJMf/
What I'm trying to do is have the TITLE fixed, not scroll. But the content scrollable.
Problem is, having a fixed title, makes it very hard to deal with the dynamic range of a title, which can have anywhere from 5 - 250 characters.
Is there a way to have the TITLE be fixed, not scroll, but have the height set based on the title length?
Is this possible w CSS? Ideas? Thanks

Answer 1

Not sure why you have all that extra styling. You don't need to style the h2 or any wrapping elements to have it expand based on the length of the text.
http://jsfiddle.net/xd7a4/
I'm not sure of the height you're desiring for the scrolling container however here I set it to 200px.
<h2>title</h2>
<div class="scroll">content</div>
H2 {
background-color: #FF0000;
}
.scroll {
height: 200px;
overflow: scroll;
overflow-x: hidden;
}

Answer 2

I think this will help :
<style>
.content {
position:absolute;
top:100px;
left:100px;
width:300px;
height:auto;
}
.title {
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
background:red;
color:#fff;
}
.text {
position:relative;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
overflow:auto;
}
</style>
<div class="content">
<div class="title">title<br/>title...</div>
<div class="text">text text <br/> text text...</div>
</div>