Make 3 divs :
* make a container div
* make 2 child within that container
* child 1 is title div
* child 2 is body div with scroll bars - overflow:auto is the key
Here is the source code
<html>
<head>
<title>Div with a scroll bar</title>
</head>
<body >
<!-- container div -->
<div style="position:absolute;overflow:hidden;top:100px;left:100px;width:300px;height:175px;border:solid black 1px;">
<!-- title div -->
<div style="position:absolute;top:0px;left:0px;width:100%;height:25px;border-bottom:solid green 5px;background-color:red;text-align:center" >Who am I?</div>
<!-- data div -->
<div style="overflow:auto;top:25px;position:absolute;left:0px;width:100%;height:150px;border-bottom:red;background-color:#cffccf;text-align:left" >
People sometimes call me mad<br/>
I am a joker<br/>
I am an honest person<br/>
I am down to earth<br/>
I am a guru<br/>
I don't have a g/f<br/>
I have very good friends<br/>
I am popular<br/>
I like challenging task<br/>
I am a software engineer<br/>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment