Easiest (I hope) to just check it out here: http://jsfiddle.net/UG7un/
There is a fixed wrapper that covers the whole page with a 20px margin. How do I get content to scroll within that wrapper?
<div id="wrap">
<div id="content">
<p>How can I get this to scroll within this white content area only, using the native browser scroll?</p>
</div>
<div id="photo"></div>
</div>
html {
background:url(http://i1210.photobucket.com/albums/cc406/Ingutuks/2012/P5211369.jpg) no-repeat center center fixed;
background-size:cover;
}
#wrap {
background:#fff;
margin:20px;
position:fixed;
overflow:hidden;
}
#content {
width:45%;
padding:2.5%;
float:left;
}
#photo {
width:50%;
background:url(http://i1351.photobucket.com/albums/p790/KrazyKobraRawr/Jojothecat_zps448af247.jpg) no-repeat center center;
background-size:cover;
float:right;
}
If I understand correctly then you can use overflow:auto; in your wrap div.
#wrap {
background:#fff;
margin:20px;
position:fixed;
overflow:auto;
}
it will show the scroller in your wrap div.
You need to specify height;
#content {
overflow:auto;
height:360px;
width:45%;
padding:2.5%;
float:left;
}
http://jsfiddle.net/UG7un/1/
You mean like this?
http://jsfiddle.net/UG7un/3/
Commented out the:
position:fixed;
and a couple lines of the JS.
Related
I'm making a small website. The background is filled with a picture, say, a map. On the right is an overlay on top of the picture. The overlay has a title, and a list below it.
Now I cannot get to have the list get a scrollbar if it is too large to fit in the screen.
I do not want the page to scroll: the background fills out the screen 100%. I do not want the complete overlay to scroll (comment out the first CSS comment to get this). I also do not know the size of the title beforehand - if I knew that, it would be easy (simply comment out the second comment in the CSS, and hey presto, works). I can go the long way, and have javascript watch the title panel size, but I'd rather have a plain CSS/html solution.
Any ideas?
Code:
<html>
<style>
div {
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body {
height:100%;
margin:0;
}
.panels {
position:fixed;
top:50px;
right:50px;
bottom:50px;
/* overflow:auto; */
}
.list {
/* position:absolute;left:10px;right:10px;top:150px;bottom:20px; */
background-color:white;
overflow:auto;
}
</style>
<div class='panels'>
<div class='header'>Some title or other</div>
<div class='list'>
<ul>
<li>Entry</li>
...lots of entries...
<li>Entry</li>
</ul>
</div>
</div>
</html>
JSFiddle: http://jsfiddle.net/95ajc0us/
Add height:100% for the second div.
.list {
background-color:white;
overflow:auto;
height:100%;
}
DEMO
If you wish the list should scroll down in case of more entries.
Just write down :
ul{
overflow:scroll;
height: 200px;
}
for your UL(Unordered list)
Please feel free to ask again we are not on same page..
Thanks
you have fixed the html and body position.
instead fix the position of header
.header{
position:fixed;
width:100%;
left:0;
top:0;
}
link
You'll need to adjust the top and bottom properties to taste:
div
{
font-size:1.5em;
padding:10px;
background-color:green;
}
html, body
{
height:100%;
margin:0;
}
.panels
{
position:fixed;
top:50px;
right:50px;
bottom:50px;
}
.list
{
position:absolute;
left:10px;
right:10px;
top:150px;
bottom:20px;
background-color:white;
overflow-y:scroll;
}
scroll is missing because you have a fixed panel, which will prevent the div from scrolling
you need to fix header, not list
.header{
position:fixed;
width:100%;
top:0;
}
demo
final edit (updated fiddle on Suresh Ponnukalai answer)
I am trying to scroll a content child of a fixed div. I am trying to scroll without the scroll bar being visible (using the mouse scroll). I have pretty much tried all the solutions I came across on Stackoverflow and on google in general but no success.
Please find here the JSfiddle of the problem:
THE CSS:
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow: hidden;
}
nav {
position:relative;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}
JS FIDDLE:
http://jsfiddle.net/5Xg5v/2/
Please note that the parent div must be fixed and must be 100% height.
Thank you in advance!
You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.
nav {
position:relative;
height:100%;
width: 110%; /* <---- */
overflow-x:hidden;
overflow-y:scroll; /* <---- */
}
Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).
You can try the following :
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow:hidden;
}
nav {
height:100%;
overflow-y:auto;
overflow-x:hidden;
width:100%;
padding-right: 15px;
}
Example
You can style the scrollbar using webkit.
element::-webkit-scrollbar {styling here}
In order to hide the scroll bar on your nav element you can use the following:
nav::-webkit-scrollbar {
width:0!important;
}
OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup
I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!
<style type="text/css">
<!--
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
#header {
width:650px;
height:87px;
z-index:1;
background-color:#C90;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#navbar {
width:650px;
height:32px;
z-index:2;
background-color:#0FF;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:265px;
z-index:3;
background-color:#33F;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#sidebar {
width:150px;
height:265px;
z-index:4;
background-color:#999;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#footer {
width:650px;
height:58px;
z-index:5;
background-color:#F69;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>
You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.
So if your container is 400px high you would use the following css:
#container {
position: absolute;
top: 50%;
margin-top: -200px;
}
In your case your 'container' is 442px high, so change this css:
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
To this:
DIV.container {
position:absolute;
top:50%;
margin-top:-221px;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
Your stylesheet can be much cleaner/smaller.
See this demo fiddle.
And if you don't want a scroll bar when the browser window becomes small, then add overflow: hidden to the body, see this fiddle. But that's NOT a tip in the light of usability.
And to make it dynamic, use Javascript/jQuery to find the height of the window, and adjust DIV.container's margin-top as shown by Kokos.
My basic layout for my page is:
<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>
headWrap has all my menu items and search bar. contentWrap holds the content of each page. Both have a width of 100%. headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.
Somehow, when the page is rendered, the horizontal scroll bar is visible. Even though it appears that all content is on the page. If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white. If I stretch the window wide enough the background image takes up the entire page.
How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.
#headWrap{
position:relative;
width:auto;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:auto;
height:1005;
margin:0 0 0 0;
padding:0 0 0;
float:left;
background:url(images/contentBg.jpg) repeat-x;
}
Use following CSS styles: width and overflow:hidden;
html{
margin: 3px 1px;
}
*+html{
overflow:auto;
}
body{
margin:0;
width:100%;
min-width:800px;
position:relative;
}
#headWrap{
position:relative;
width:100%;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:100%;
margin:0;
padding:0;
float: left;
background:url(images/contentBg.jpg) repeat-x;
}
Maybe you have some default margins that are added in addition to the 100% width? I suggest using a reset css, for instance YUI 2: Reset CSS.
You're looking to set the overflow CSS property.
I've trouble centering my webpage using the css:
CSS code below:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
position:absolute;
top:202px;
width:560px;
height:224px;
z-index:2;
}
#newsSection {
position:absolute;
left:576px;
top:209px;
width:380px;
height:600px;
z-index:2;
}
HTML:
<body>
<div id="wrapper">
<div id="welcome">
//content here
</div>
<div id="newsSection">
//content here
</div>
</div>
</body>
I can center the webpage except for the #newsSection div.
The reason why I put "left:576px" under #newsSection div is because I want it to place it right next to the #welcome div.(side by side) However, when I shrink my browser size, #newsSection div will move to the left a bit and overlap #welcome div.
If I remove "left:57px", then the #newsSection div will appear right on top of #welcome div...
Please help.
Thanks
This is probably because youre using absolute position on the child divs. Therefore, "the kids will run wild", as in, they don't care that the parent div#wrapper is center.
Some potential code:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
float: left;
width:560px;
height:224px;
}
#newsSection {
float: left;
width:380px;
height:600px;
}
you should use relative positioning, ie, tagname.class {position:relative; top/right:? ;}
To center a webpage you can use this:
.container{
width: 100%;
max-width:80%;
margin: 0 auto;
}