Scrollable box containing list of Checkboxes in HTML

Question

Attached you'll see a picture of a mock up I did for the required UI. As you can see I need some type of scrollable box that contains checkboxes.

I've thought of a scrollable div, although I can't find a way to set a border around a div? Second I thought of an IFrame.. But also not too sure if this is my best option.

Does anybody perhaps have an easier/better way of doing this?

Thanks in advance!

Answer 1

CSS:

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

HTML:

<div class="container">
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
    <input type="checkbox" /> This is checkbox <br />
</div>

How it looks:

Is this what you are looking for?