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 5  1237 
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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
</div>
</div>
</body>
</html>
"Mark" <sw****@hotmail .com> wrote in message
news:eM******** ******@TK2MSFTN GP10.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
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.c om> wrote in message
news:%2******** *******@TK2MSFT NGP15.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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
</div>
</div>
</body>
</html>
"Mark" <sw****@hotmail .com> wrote in message
news:eM******** ******@TK2MSFTN GP10.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
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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
</div>
</div>
</body>
</html>
"Mark" <sw****@hotmail .com> wrote in message
news:ut******** ********@TK2MSF TNGP14.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.c om> wrote in message
news:%2******** *******@TK2MSFT NGP15.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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
</div>
</div>
</body>
</html>
"Mark" <sw****@hotmail .com> wrote in message
news:eM******** ******@TK2MSFTN GP10.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
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.c om> wrote in message
news:OF******** ******@TK2MSFTN GP10.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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
</div>
</div>
</body>
</html>
"Mark" <sw****@hotmail .com> wrote in message
news:ut******** ********@TK2MSF TNGP14.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.c om> wrote in message
news:%2******** *******@TK2MSFT NGP15.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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
> </div>
> </div>
> </body>
> </html>
>
>
>
> "Mark" <sw****@hotmail .com> wrote in message
> news:eM******** ******@TK2MSFTN GP10.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
>>
>>
>
>
ie6 on w2k & winxp
are you including the DOCTYPE ?
"Mark" <sw****@hotmail .com> wrote in message
news:OF******** ******@TK2MSFTN GP15.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.c om> wrote in message
news:OF******** ******@TK2MSFTN GP10.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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
</div>
</div>
</body>
</html>
"Mark" <sw****@hotmail .com> wrote in message
news:ut******** ********@TK2MSF TNGP14.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.c om> wrote in message
news:%2******** *******@TK2MSFT NGP15.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!dsjfghsjd fhgjklsdfhgjsdh gkjhsdflkghsdlk jfgljsdhglkjsdf hg
> </div>
> </div>
> </body>
> </html>
>
>
>
> "Mark" <sw****@hotmail .com> wrote in message
> news:eM******** ******@TK2MSFTN GP10.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
>>
>>
>
>
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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 need to
specify html instead. The scrollbars do hide on Gecko browsers though, so
there is definitely a disagreement among browser developers on how to
implement scrollbars (as a side note, Gecko browsers with their notoriously
bug-ridden...
|
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 XHTML1.0 Strict
one, the media-handheld CSS is _ignored_. Only with the Nokia Doctype,
the CSS is used. I find this really annoying as it goes against the
whole idea of media-independent XHTML Strict along with stylesheets.
On the good side, WML...
|
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 single tabled content into unordered
lists and then used something like
..html
<ul class="aaaa"><li>blah</li></ul>
|
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.
http://users.tpg.com.au/karl6740/css/table_elements_periodic.html
CSS:
Notice in the TRs with the lanthanides and actinides, the empty TDs at
the end taking the background colour of the TR? I say they shouldn't
|
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 far to
make it disappear. If I use XHTML 1.0 Transitional instead of Strict
the extra space below the cells disappears.
Is it impossible to create seamless images tables in XHTML Strict?
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC...
| | |
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 (simplified)
looks like:
Label --- Input Field --- Submit button
Label --- Input Field --- Submit button
Label --- Input Field --- Submit button
|
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 supposed to consume the entire
viewing area (oldschool HTML was <table width="100%" height="100%">).
This is not as easy as it sounds using the forementioned technologies.
I am using some ASP.NET 2.0 controls that specifically depend on the
way...
|
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:
<div src="fragment.xhtml" />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Dr. Dario de Judicibus - Italy (EU)
Site: http://www.dejudicibus.it/
Blog: http://lindipendente.splinder.com
|
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 pages in
html4. In converting to html, some visual changes have crept in - any
suggestions would be appreciated.
My design in xhtml is at
www.niksally.f2s.com/upload/xhtml.html
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
