Question

since I can not markup content inside tags I want to create my own “custom” textbox.
The textbox should work as a kind of console, where the progress of battle (i.e.) is logged.
I first tried to use a div, within a div, within divs for each log, but when the divs inside the outer divs exceed the max-height, they ignore the surrounding divs.

Example:

Even if this would work I still got the problem, that there is no scrollbar, since it’s not a <textarea>.

I googled a lot, but the only thing I found where overwhelming tutorials for dynamic feedreaders etc.

What I am looking for is a simple “textbox” aka “console” with scrollbar which contents do respect the borders of that console.
Accomplished with jQuery.

Thank you very much!

Solution:

Before

<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;">
    <div style="padding:2px 2px 2px 2px;">
        //content
    </div>
</div>

After

<div id="battleLog" style="max-height:100px;height:100px;min-height:100px;overflow-x:hidden;overflow-y:scroll;">
    <div style="padding:2px 2px 2px 2px;">
        //content
    </div>
</div>

Answer 1

try setting this css on your div

overflow-x:hidden;
overflow-y:scroll;