XHTML + CSS2 Layout Problem

M

Mark

I am struggling with a CSS2 layout problem, I am using Visual Web Developer
2005 Express.

My website needs to be constrained within the visible viewport. This means
that scrollable content will be contained within a scrollable DIV - the
problem I have is in giving this DIV a certain height and width of it's
containing DIV.

For instance...
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<div id="div1">
<div id="div2">
Hello World!
</div>
</div>
</body>

In my stylesheet I have...

body {
height: 100%;
}

#div1 {
height: 100%;
width: 100%;
background-color: Red;
}

Now the problem is with #div2 - I need it to be set within #div1 with it's
content area say 20px within #div1 - how do I do this? I will have
"overflow: scroll" but I have tried various combinations of using padding
and margin and various position attributes but I have had no luck, can
anybody help?
 
G

gerry

this works for me :

<html>
<head>
<style>
body {
height: 100%;
}
#div1 {
height: 100%;
width: 100%;
background-color: Red;
}
#div2 {
margin:20px;
height: 100%;
width: 100%;
background-color: Blue;
overflow:scroll;
white-space: nowrap; /* maybe you want this - maybe not */
}
</style>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<div id="div1">
<div id="div2">
Hello
World!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfgljsdhglkjsdfhg
</div>
</div>
</body>
</html>
 
M

Mark

Thanks Gerry, but this doesn't work in my browser (IE 6.0). It doesn't fit
inside the browser viewport ie the browser scroll bars reappear. Which
browser are you using?
 
G

gerry

I do see that the vertical scroll bar is still there.
this is not 100% but its pretty close :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html , body {
height: 100%;
width:100%;
padding:0px;
margin:0px;
}
#div1 {
padding:2%;
height: 94%;
width: 94%;
background-color: Red;
}
#div2 {
height: 98%;
width:98%;
background-color: Blue;
overflow:scroll;
white-space: nowrap; /* maybe you want this - maybe not */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello
World!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfgljsdhglkjsdfhg
</div>
</div>
</body>
</html>
 
M

Mark

I see both horizontal and vertical scrollbars and they both scroll - do you
se only 1 inactive vertical scrollbar? What browser are you using?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top