Creating a div whose display dimensions are different than it's contents dimensions

I would like to be able to make a 开发者_JS百科div that allows users to dynamically add content to a specific spot in say a 100px by 200px area but would only display a window of 50px by 100px for the user to place the content. The user would scroll to reach the rest of the div. How can I do this using either CSS or JavaScript?

REVISE

I want my div's height and width to start as 100x200 but only display a window with dimensions of 50x100, with a scroll bar that lets the user reach the rest of the div.

---

Try this:

HTML:

<div id="window">
    <div id="content">
    </div>
</div>

CSS:

#window {
    width: 50px;
    height: 100px;
    overflow: auto;
}

#content {
    width: 100px;
    height: 200px;
}

---

CSS:

#myDiv  {
    width:100px;
    height:50px;
    overflow:auto;
}

Overflow works the magic here.

---

Html:

<div id="myDivWindow">
 <div id="myDiv">
 </div>
<div>

Css:

#myDivWindow  {
    width:50px;
    height:100px;
    overflow:auto;
}

#myDiv  {
    width:100px;
    height:200px;
}

Add your content to myDiv

---

The easiest way to do this would be to just use 2 div. Like this...

<div style="width:100px;height:50px;overflow:auto;">
<div style="width:200px;height:100px;overflow:none;">
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
</div>
</div>

If you don't want to have nested div elements like this in you html you could add a class or id and dynamically add and style the second div with JavaScript.