hi
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable. I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
You need to add semicolons after overflow:hidden and overflow:scroll if there are multiple declarations between the braces. You don't need to use them if it's the last declaration, but it's good practice to always use them anyway.
Try adding html {overflow: hidden;} for IE.
You should also add a height to mainSection if you haven't.
The scrollbars in mainSection will be always shown if you use overflow: scroll. If you want to hide the scrollbars when the content in it is smaller than mainSection then use overflow: auto.
If you only want the vertical scrollbar to display use overflow-y: scroll or overflow-y: auto along with overflow-x: hidden which is supported in most browsers nowadays.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera