Question

I’ve a container div with id container around.

Inside, I’ve got a div with id inside which can contain a Text which is wider than the container div. The text should not be wrapped.

As summary, thats how it looks like actually:

_____DIV CONTAINER________________________
|'---DIV INSIDE--------------------------|----------------
|'                                       |               '
|' here it contains some long text which is very long    '
|'                                       |               '
|'---------------------------------------|---------------'
|________________________________________|

Now, I want it to look like this:

_____DIV CONTAINER________________________
|'---DIV INSIDE--------------------------|
|'                                       |
|' here it contains some long text which |
|'                                       |
|'---------------------------------------|
|________________________________________|

Like this it should look like and a horizontal scroll bar in the bottom should be displayed.

If I solve this, the inner div shows the right border inside the CONTAINER, but the text is continuing. So it accidentally looks like this:

_____DIV CONTAINER_____________________________
|'---DIV INSIDE------------------------'      |
|'                                     '      |
|' here it contains some long text whic'h look| [and here's the text under the container]
|'                                     '      |
|'--------------------------------------      |
|_____________________________________________|

As i just saw, it should look right like here in stack:

........................................................look at the border here |  very long text very long text very long text very long text very long text very long text very long text very long text

The text goes under the inline div border but does not wrap. This is what I want to reach. How can I solve this?

Answer 1

You want to set the container div’s overflow property to scroll:

#container {
    overflow:scroll;
}