jQuery: How to change the size of a css block?

Question

Working on an assignment, and I don't think this is the part we're supposed to be having trouble with (we're supposed to be working on scroll buttons, which I already have an idea on):

"--create a page that displays some paragraphs using the css block style. 
The block size should be too small to display the text in its entirety."

I've got a bunch of text in a div with id="story" and I have this inside my script tags:

$("#story").css("display", "block");

However nothing appears to change. The layout remains the same and I can't for the life of me figure out how to change the size of a css block. Everything I find is about box-size.

So two questions: 1. Why is the display not changing when I use .css() to apply 'block' and 2. how do you specify the size of a css block?

Edit: I've tried adding:

$("#story").css("height", "20px");

but that also shows no change.

Edit:

Thank you all! Everyone was spot on and I feel incredibly silly. I didn't realize that overflow had to be set before it would apply the size setting. As soon as I put in:

overflow: scroll; 

it started displaying correctly. Guess that's what I get for trying to put in one piece at a time

;p

Answer 1

.css("display", "block") displays an element as a block element. A div is displayed as block by default.

What you have to do is specify the height manually, either through CSS:

#story
{
    height: 100px;
}

Or if you want to use jQuery:

$("#story").css("height", "100px");

If you want to have it scrollable, add this to the CSS:

overflow-y: scroll;

Answer 2

1. A "div" by default is displayed as a block.
2. You specify the size of a block with the width and height parameters.

Answer 3

You have to explicity give a fixed width and height in your CSS.

Divs (and other elements with display:block applied) are fluid otherwise, and will expand to contain whatever is put in them.