XHTML + CSS2 Layout Problem

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?

--
Best regards
Mark Baldwin

Nov 19 '05 #1

Subscribe Post Reply

1227

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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
</div>
</div>
</body>
</html>

"Mark" <sw****@hotmail.com> wrote in message
news:eM**************@TK2MSFTNGP10.phx.gbl...

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?

--
Best regards
Mark Baldwin

Nov 19 '05 #2

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?
"gerry" <ge**@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP15.phx.gbl...

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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
</div>
</div>
</body>
</html>

"Mark" <sw****@hotmail.com> wrote in message
news:eM**************@TK2MSFTNGP10.phx.gbl...
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?

--
Best regards
Mark Baldwin

Nov 19 '05 #3

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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
</div>
</div>
</body>
</html>

"Mark" <sw****@hotmail.com> wrote in message
news:ut****************@TK2MSFTNGP14.phx.gbl...

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?
"gerry" <ge**@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP15.phx.gbl...
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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
</div>
</div>
</body>
</html>

"Mark" <sw****@hotmail.com> wrote in message
news:eM**************@TK2MSFTNGP10.phx.gbl...
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?

--
Best regards
Mark Baldwin

Nov 19 '05 #4

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?

--
Best regards
Mark Baldwin

"gerry" <ge**@hotmail.com> wrote in message
news:OF**************@TK2MSFTNGP10.phx.gbl...

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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
</div>
</div>
</body>
</html>

"Mark" <sw****@hotmail.com> wrote in message
news:ut****************@TK2MSFTNGP14.phx.gbl...
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?
"gerry" <ge**@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP15.phx.gbl...
> 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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
> </div>
> </div>
> </body>
> </html>
>
>
>
> "Mark" <sw****@hotmail.com> wrote in message
> news:eM**************@TK2MSFTNGP10.phx.gbl...
>> 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?
>>
>> --
>> Best regards
>> Mark Baldwin
>>
>>
>
>

Nov 19 '05 #5

gerry

ie6 on w2k & winxp
are you including the DOCTYPE ?
"Mark" <sw****@hotmail.com> wrote in message
news:OF**************@TK2MSFTNGP15.phx.gbl...

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

--
Best regards
Mark Baldwin

"gerry" <ge**@hotmail.com> wrote in message
news:OF**************@TK2MSFTNGP10.phx.gbl...
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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
</div>
</div>
</body>
</html>

"Mark" <sw****@hotmail.com> wrote in message
news:ut****************@TK2MSFTNGP14.phx.gbl...
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?
"gerry" <ge**@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP15.phx.gbl...
> 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!dsjfghsjdfhgjklsdfhgjsdhgkjhsdflkghsdlkjfglj sdhglkjsdfhg
> </div>
> </div>
> </body>
> </html>
>
>
>
> "Mark" <sw****@hotmail.com> wrote in message
> news:eM**************@TK2MSFTNGP10.phx.gbl...
>> 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?
>>
>> --
>> Best regards
>> Mark Baldwin
>>
>>
>
>

Nov 19 '05 #6

Similar topics

IE6, xhtml, scrollbars and you

by: Nobody | last post by:

Okay, you are all so smart in here. Answer me this: IE6 in standards mode doesn't seem to hide scrollbars on the body element (overflow:hide) Ain't this a quandary. I have it in my head that I...

Javascript

XHTML Strict vs Basic Madness

by: Philipp Lenssen | last post by:

I've tested some of the new Nokia 6600 functionality. It ships with WAP2 and XHTML Support (it says). What it does is check the Doctype -- if it's not the XHTML Mobile Profile Doctype, but a...

HTML / CSS

Is there an XHTML replacement for using tables?

by: Ben Jessel | last post by:

I am in the process of converting my site to using XHTML and CSS. A lot of my sites include tables of data, which are highlighted using javascript rollovers. I have converted my a lot of my...

HTML / CSS

Tables: periodic, elemental, operatic, HTML4, CSS2 (with tabular data, not "layout")

by: Karl Smith | last post by:

I heard a rumour that Opera succeeded where none have before, and implemented the tables described in HTML4 and CSS2. So I thought I'd try it out with the well known Periodic Table. ...

HTML / CSS

seamless images tables in xhtml strict and css

by: Peter Maas | last post by:

The XHTML file below creates a 2x2 matrix of square images. There is always some space at the bottom borders of the cells (when rendered with Gecko and KHTML, not with IE) and I've found no way so...

HTML / CSS

xhtml, tables and forms

by: tamas.hauer | last post by:

Hi, I am trying to create a tabular-looking collection of forms. I have a <table> ... content ... </table> with each row a separate form (collecting many actions on the same page). The layout...

HTML / CSS

ASP.NET 2.0/XHTML 1.1 Table Height Display Issue

by: TheXenocide | last post by:

Hello, First and foremost I'll describe a bit about my problem: I'm trying to make a site layout using ASP.NET 2.0 in Visual Studio .NET 2005 Beta 2. The site is a table based layout that is...

ASP.NET

[XHTML] «src» attribute in most tags

by: Dario de Judicibus | last post by:

I think that is really important to have the «src» attrinbute in tags other than «img» in order to include XHTML fragments without depending on server-side mechanisms as ISS or PHP. For example: ...

HTML / CSS

differences in rendering xhtml and html

by: Nik | last post by:

I have been trying base my site on the Ruthsarian Lab's layout at http://webhost.bridgew.edu/etribou/layouts/skidoo/demos/tweak_01.html This design is in xhtml, whereas I would prefer to have my...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing