CODEWITHSUNDEEP
htmlcssoverflowborder
Florian Müller
Florian Müller

Reputation: 7785

HTML/CSS: Div in Background matching containing text

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?

Upvotes: 0

Views: 327

Answers (3)

Simon
Simon

Reputation: 415

have a 3rd div within the "inside" that doesn't have in your case a set width and allows for overflow.

this will mean that the content within inside will overflow however not alter the size of inside and it parent divs.

also two helpful css rules that maybe handy to apply to the div within inside:

overflow-x: auto;
overflow-y: hidden;

(that will only show the x bar).

Hope this helps?

Upvotes: 1

J Max
J Max

Reputation: 2381

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

#container {
    overflow:scroll;
}

Upvotes: 2

Steve Adams
Steve Adams

Reputation: 2837

I believe you want to set your parent div to overflow: scroll.

Upvotes: 1

Related Questions