How to constrain rendered HTML code inside a div

Question

I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.

Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:

$(document).ready(function(){
        $("#showmeImg").click(function(){
            $("#outputContainer").html($(myEditor.getValue()));
        });
    });

So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.

Answer 1

You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.

Answer 2

You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:

#outputContainer {
    height: 300px;
    overflow: auto;
}

If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll; .

Answer 3

Have you tried something like this?

#outputContainer {
    ovwerflow-y: auto;
}

This will add a vertical scrollbar, when there is enough content inside your container. There are many nice jQuery plugins for adding nicer scrollbars though :). http://enscrollplugin.com/ for example.