CODEWITHSUNDEEP
css
sly_Chandan
sly_Chandan

Reputation: 3515

CSS overflow issue

I have a div which has the css overflow property set to auto. But the overflow property doesn't seem to work and instead of showing a scrollbar within the div, the content of div flows outside div.

What am I missing here?

<div id="divPrvChatBox">
</div>

#divPrvChatBox
{
    width:330px;
    height:200px;
    background-color:Yellow;
    overflow:auto;        
}

Upvotes: 1

Views: 149

Answers (3)

Phrogz
Phrogz

Reputation: 303490

I believe that (for whatever reason) your overflow CSS style is not being applied. Perhaps you have a syntax error in your CSS. Perhaps your setting is being overridden. As noted in my comment above and shown in this simple test case using overflow:auto does prevent content from drawing outside the borders of the container, and also causes scrollbars to appear as needed.

Use the Developer Tools for your browser (F12 for IE, right-click and Inspect Element for Chrome or Safari, install Firebug for Firefox) to inspect the actual styles applied to the element in question. You will either see that your rule is not being applied, of the property is not part of your rule, or the rule is being overridden by a more specific selector.

Upvotes: 1

Kyle
Kyle

Reputation: 67244

Set overflow to scroll:

#divPrvChatBox
{
    width:330px;
    height:200px;
    background-color:Yellow;
    overflow: scroll;        
}

Example here.

Upvotes: 1

rlb.usa
rlb.usa

Reputation: 15041

overflow:scroll;

This is what you need to explicitly tell the browser to use scroll-bars. When you use auto you are telling the browser that it can decide for itself, often giving some WTF results.

Upvotes: 2

Related Questions