only center of website scrolling with main scrollbar

Question

0.00/5 (No votes)

See more:

hello.. i am new in web development and designing.I want to make a page in which only the center of the page is scrolling with main scrollbar and the background is fixed.check this website for more clear idea http://www.thefilterbubble.com/10-things-you-can-do[^].
The main center div should also have place for header and footer as well.Please give me html and css code separately.

Posted 19-Sep-13 18:05pm

Karn Singh

Updated 19-Sep-13 20:27pm

v2

Add a Solution

Comments

Bala Selvanayagam 20-Sep-13 3:52am

not clear what you are exactly trying to do ?

the link you have provided looks normal and can not see anything scrollable only in the middle unless am missing something ?

Karn Singh 20-Sep-13 10:28am

hey as you can see in that link the written part is only scrolling when we scroll the bar down.the off white color on sidebar remains the same as we go down and down.how can i achieve this layout?

vbmike 20-Sep-13 21:04pm

If you provide the html tag in your page with a width somewhat smaller than the screen or browser width it will appear as you see it on your example page. Open your example page's source and then click on it's css file. You will see that they have the main div sized at 980px which makes it appear the way it does.

bjdestiny 23-Oct-13 4:50am

use display:block and position:fixed; i think it will work.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Alexanbu · Answer 1 · 2013-11-19T02:43:00

Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.

So you want:

A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.

CSS:

CSS

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

Markup:

XML

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

CSS

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.