Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Set Page Scroll to show content if Fixed div overflows

Set Page Scroll to show content if Fixed div overflows

Problem

HTML5 is awesome! Bit to learn with formatting for a novice like me however.

I have a layout page in MVC4 and it is using two fixed div's. One is a menu and so on and the other is a content holder.

My css snipit:

.maincontent
{
position: fixed;

top:7px;
left:382px;
right:7px;
width: auto;
height: auto;
}

I want to auto scroll the page if this Div Overflows. I have tried:

overflow-y:auto;

in both the body css and maincontent css elements but its not working.

Am I missing something?

Thanks

Problem courtesy of: Rusty Nail

Solution

Everything I tried failed.

Quick and dirty, I put the div's inside a table, single row, dual column, and set the second div to:

position:relative;

Quick and dirty table:

With div1 CSS:

.div1
{
position: fixed;
top:3px;
right:auto;
width: 355px;
height: auto;
}

and div2 CSS:

.div2
{
position: relative;
margin-left:7px;
margin-right:7px;
margin-bottom:7px;
width:inherit;
}

It works this way exactly as I need but I would like to know if there is a proper way to do it.

Solution courtesy of: Rusty Nail

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Set Page Scroll to show content if Fixed div overflows

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×