CODEWITHSUNDEEP
javascripthtmlcss
jochemke
jochemke

Reputation: 2477

How to let content scroll without going over my header?

i'm new to webdesign and i have a little problem. I have a header(at the top), a navigation(at the left) and then the main content. I have set my header and navigation to position: abosulute so it won't scroll with the page. Now I wanna make it that the maincontent doesn't go over the header when you scroll. How can i do this?

image of the site

Upvotes: 0

Views: 758

Answers (4)

tuff
tuff

Reputation: 5153

You can put your content in another absolutely positioned div, and then allow it to have a scrollbar with overflow: auto (scrollbar hidden when not necesssary) or overflow: scroll (scrollbar always visible).

Here is a fiddle to demonstrate: http://jsfiddle.net/YYmA9/1/

Upvotes: 1

w3uiguru
w3uiguru

Reputation: 5895

Here is the fiddle to get the desired layout... Header and sidebar position: absolute;

Fiddle: http://jsfiddle.net/FTtzc/1/

Demo: http://jsfiddle.net/FTtzc/1/embedded/result/

Upvotes: 2

QQping
QQping

Reputation: 1370

Give your Header a Backgroundcolor and z-index: 2; and your content gets z-index: 1; for further reference on z-index http://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46539

Put the main content in a container of its own and give that container a scrollbar.

Upvotes: 1

Related Questions