asked on

CSS overflow issue

Hi

I'm trying to create a div with overflow:auto and a with a defined top and bottom margin. This div box should fill the entire browser window except the defined margins(see example here: http://www.dhtmlgoodies.com/ee/ScreenShot077.png). When content exceeds the "box", a scrollbar should appear at the right side(because of overflow:auto).

Here's a code sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <title>Overflow issue</title>
 <style type="text/css">
 html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
 }
 #myContainer{
 height:100%;
 width:500px;
 margin-left:100px;
 }
 .spacer{
 height:200px;
 background-color:#0FF;
 }
 .content{
 overflow:auto;
 background-color:#F00;
 margin-top:100px;
 margin-bottom:100px;
 }
 </style>
</HEAD>
<body>
 <div id="myContainer">
 <div class="content">
 This box should have a bottom margin of 100 pixels and a top margin of 100 pixels. When it's not
 enough space for this text, a scrollbar should appear. 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 This is the content 
 </div>
 </div>
</body>
</HTML>

What I can't figure out is how to get the space/margins above and below the red box(100 pixels) and on the same time scrollbar at the right side of it when there's too much content.

I can't set a height for the box either since it should be dynamic, i.e. the height should change when the browser window is resized.

ASKER CERTIFIED SOLUTION

ameba

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Batalf

ASKER

Thanks