CODEWITHSUNDEEP
htmlcssscrolloverflowcontainers
Bryan Fajardo
Bryan Fajardo

Reputation: 161

scrolling div within a container div not working

I know there is a lot of examples/help of this specific CSS technique, but I feel that my code is 100% correct, still however, I'm not sure why it isn't working.

The point is, im trying to have an inner div wrapped by an outer div. I want the inner div to scroll vertically without a scroll bar appearing, and I don't want the contents of the inner div to flow outwards outside of the outer div.

Here is the jsfiddle. http://jsfiddle.net/FE5X7/

Here it is live on my domain: paxframe.com

The HTML:

<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="index.css"  />
<link rel="stylesheet" type="text/css" href="reset.css"  />

<title>Bryan the Lion</title>
</head>

<body>
    <div id ="wrapper">
        <div id = "header">

        </div>
        <div id ="wrapper_main">
        <p>main wrapper</p>
            <div id = "main">
                <p>main div</p>

            </div>
        </div>
    </div>
</body>

</html>

The CSS:

body{
height: 100%;
}
@font-face {
font-family: "AlexBrush";
src: url(fonts/AlexBrush-Regular.ttf) format("truetype");
}
#wrapper{
width: 80% ;
margin: 0 auto ;
background: yellow ;
height: 100% ;  

}
#wrapper_main{
background: red ;   
margin: 0 auto ;
width: 700px ;
height: 500px ;
border: solid 1px black ;
overflow: hidden;
}
#main{
background: blue ;
width: 700px ;
height: 1000px ;
overflow: scroll;

}
#header{
width: 90% ;
height: 10px ;
background: green ;
}
#header h1{
font-family: AlexBrush ;
font-size: 5em ;
}
#nav{
height: 50px ;
width: 80% ;
margin: 0 auto ;
display: block ;
background: gray ;
}   
#nav ul li{
display: inline-block;
letter-spacing: 2px ;
background: purple ;
}
#sidebar{

}

Upvotes: 0

Views: 10181

Answers (1)

Canser Yanbakan
Canser Yanbakan

Reputation: 3870

You can't do that withoud any child element that will overflow your div. Try adding some lipsum text to your div and it will work.

You are giving overflow:scroll to the wrong element.

Change:

#wrapper_main{
    background: red ;   
    margin: 0 auto ;
    width: 700px ;
    height: 500px ;
    border: solid 1px black ;
    overflow: scroll;
}

#main{
    background: blue ;
    width: 700px;
    height: 1000px;
}

Updated fiddle:

http://jsfiddle.net/FE5X7/2/

Update:

#wrapper_main::-webkit-scrollbar { 
    display: none; 
}

New fiddle:

http://jsfiddle.net/FE5X7/3/

Note: works with webkit browsers. You will need jquery for hiding scrollbar for moz and ie.

Upvotes: 2

Related Questions