CSS2: what is the container of everything ?

I have happily lived for 15 years (our first web server started in 1993)
without CSS, but I now decided to learn and experiment with it.

My personal preference has always been that the width of items in my
pages are USUALLY not set in fixed values, but as percentages (e.g. for
frames in frameset, or tables w.r.t the display area), since a priori I
cannot know what screen or window size users will use, and the browser
window can be arbitrarily resized in the horizontal direction, ideally
with no horizontal scrollbar unless really needed. Similarly I do not
use absolute font names or sizes (otherwise said I care for content and
logical layout but not for a precise look being the same everywhere).

Some of my colleagues however have written pages which define pages with
fixed fonts, or a fixed width. Unfortunately if the window is not wide
enough, one has to scroll horizontally.

I hoped one could cure that, and apparently one can do something on a
simple (single column) document with something like :

body {width: 20cm; max-width: 80%;}

(on a larger window the document has a fixed size and the part at the
right is unused, as now; if one resizes the window smaller, however the
document is always contained in the window, and no horizontal scroll bar
is required)

I then tried to develop a frameless frame-like appearance.

body {width: 100%; }
#myhead {position: fixed ; top: 0 ; left: 0; right:0; bottom: auto;
width: 100%; height: 4.5em; background: white; z-index: 1}
#main {position: absolute: top: 4.5em ; left: auto; right: auto;
bottom: auto; height: auto; width: 76%; margin: 2%; z-index: 0}
#sub {position: fixed ; top: 4.5em ; right: 0; bottom: 0 ; left: auto;
width: 18%; background: aqua; margin: 0 1%; zindex: 1}

Using appropriate DIVs there is a title area on the top, occupying the
entire width (myhead), a navigation area on the right (sub), and the
document goes in the main area (with vertical scroll bars scrolling it
only). I can resize the window horizontally and everything remains
visible.

<div id=myhead>space for a fixed page title</div>
<div id=main ... the bulk of the page </div>
<div id=sub ... the navigation area </div>

+---------------------------------+
| myhead |
+---------------------------------+
| | *|
| main | sub *|
| | *|
+---------------------------------+


So far so good (except that the "sub" area is not aligned flush right,
but has some 10 pixels to its right. Why ?). That's how *I* like it.

Now what if I want to combine the two things ? I.e. do as my colleagues
like. I.e. use body {width: 20cm; max-width: 80%;} and the myhead, main
and sub classes ?

I'd expect to produce an overall area which is normally 20 cm wide with
unused space on the right, or 80% of the window if resized smaller, and
that this overall area is divided into three parts as in the drawing
above (is not "body" the container of everything ?)

Instead it looks like ONLY the "main" area is rescaled to the smaller
width, and the other two still make reference to the window width.

What am I doing wrong ?

--
----------------------------------------------------------------------
nospam@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.

re: CSS2: what is the container of everything ?

On 2008-10-14, LC's No-Spam Newsreading account <nospam@mi.iasf.cnr.itwrote:
[...]Percentages are relative to the "containing block".

The containing block for absolutely positioned things is the nearest
ancestor with a position of anything except static (the initial value),
and if there isn't one the viewport.

Right now it's the viewport.

So if you make body position: relative, it becomes the containing block
for main.

But the containing block for fixed position things is _always_ the
viewport, and you can't change that.

So don't use position: fixed for myhead and sub. Instead use position:
absolute for everything but make #main overflow: auto so you can scroll
things around inside it.

You can get pretty much the same effect that way.

re: CSS2: what is the container of everything ?

On Tue, 14 Oct 2008, Ben C wrote:
(actually I use also a spacer so that the top lines of main are not
hidden under myhead).
Did you mean perhaps instead "use position: FIXED for everything but
make #main overflow: auto" ? If I do that way, with or without body
{position: relative;}, then IT WORKS as intended !!

If I do as you say all "aboslute", this causes everything (myhead main
and sub) to be scrolled in a solidal way. What I want instead is that
the header and the navigation bar remain always on the screen and only
main scrolls.

NB I obtain the same result both with and without
body {position: relative}

The only difference is that with body {position: relative} an about
10pix border appears on top of the header (why ? and why do I always
have a similar border at the right of sub ?)

OK, I understand that. I confused "margin" (which is outside the box)
and "padding" (which is inside it). With padding I can get rid of the
border on the right of sub ... still there is a thinner border if I use
body {position: relative} which goes away if I do
body {position: relative; margin:0 }

Where did it inherit a non-zero margin I did not set ?

Anyhow, I still stand with my original question
If I apply the above, surprisingly enough, myhead and sub are positioned
using the entire viewport, and only the content of main gets a narrower
width


--
----------------------------------------------------------------------
nospam@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.

re: CSS2: what is the container of everything ?

On 2008-10-15, LC's No-Spam Newsreading account <nospam@mi.iasf.cnr.itwrote:No I did mean position: absolute.
To make it work with position: absolute you make sure all three divs fit
on the screen and none of them overflow it.

Then you make #main overflow: auto or overflow: scroll and put all the
contents in there. Then #main behaves a bit like a frame.

dorayme has an example somewhere because this came up quite recently.
On sub because you gave it a right margin of 1%.

Body has a margin from the default stylesheet of about 8px. Once you
make it position: relative it becomes the container for #main, so you
will see #main move down and right by about 8px. Without position:
relative on body, #main's container is the viewport.

#myhead should not be affected by position: relative on body since it is
position: fixed and therefore its container is always the viewport.
I think you must be talking about making #myhead etc. all position:
absolute now. Yes if they're position absolute, they're positioned
relative to body's padding box if body is not position: static.

So they all move towards the centre of the page by 8px: body's margins.

If you don't like it, set body { margin: 0; padding: 0 }.
Body got it from the UA default stylesheet.
And I stand by my original answer :)

I'll see if I can find that example dorayme made.

Here it is: http://dorayme.890m.com/alt/pseudoFrames.html

And here is the thread:

http://groups.google.co.uk/group/com...c77fccda0f7101

re: CSS2: what is the container of everything ?

In article <slrngfcoc7.99k.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggswrote:
It should be added that this is really your idea and I merely made the
doc...

and posted

<http://dorayme.890m.com/alt/positionFixed.html>

at about the same time to suggest there was a way to achieve that
thread's OP's aim. But there was an issue about jerkiness. Spartinicus
mentioned this jerkiness years ago, I remember.
--
dorayme

re: CSS2: what is the container of everything ?

On Wed, 15 Oct 2008, Ben C wrote:I do not understand exactly what you mean. myhead is anchored at top=0,
left=0, width=100, so by definition fits on the screen. sub is anchored
to right=0 and vertically to top, so it also always fits on the screen.
These two are the components which shall not move.

main instead has an undefined height, which typically is longer than the
screen (otherwise I won't need a scrollbar :-))

Now I have 2 cases working with combinations absolute/absolute/fixed and
fixed/fixed/fixed overflow=auto. absolute/absolute/absolute instead
does not work (everything scrolls). I will work out self-contained
examples later today and post the urls there.
I saw it and also http://dorayme.890m.com/alt/positionFixed.html

Both work for me (once I've resized my browser window ... with the
default full screen height the entire page is visible and no scrolling
is necessary)
I see in such thread you comment "But quite jerky in Firefox because
their implementation of position: fixed is crap."

Well, I'm testing everything under firefox. Are you saying that this is
not representative of the behaviour other users may notice ?



--
----------------------------------------------------------------------
nospam@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.

re: CSS2: what is the container of everything ?

LC's No-Spam Newsreading account wrote:^^^^
See NOTE below
Because you gave #sub a 1% margin on the left and right sides.

http://www.w3.org/TR/CSS21/box.html#propdef-margin

margin: 0 1% means
margin-top: 0; margin-right: 1%; margin-bottom: 0; margin-left: 1%;

shortcut property is clockwise from top, 'margin: top right bottom left'

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

re: CSS2: what is the container of everything ?

On Thu, 16 Oct 2008, LC wrote:
OK. I have done the bare-bone examples, with style statements inside
instead than in external css files.

I stand partially corrected, because there was a typo in all my previous
exercises (including the CSS I put in my post, somebody sharp-sighted
should have noticed them ...). The typo was that in the definition of
"main" I wrote e.g. position: absolute: top: 0; ... i.e. there is a
COLON instead of SEMICOLON after absolute or fixed

.... I wonder how the browser interpreted it ...
.... and whether there is a tool (like the javascript console) where
one could spot such errors

Anyhow these are the examples :

typo work
http://sax.iasf-milano.inaf.it/~luci...Css/testA.html Y Y
http://sax.iasf-milano.inaf.it/~luci...testAcorr.html N N
http://sax.iasf-milano.inaf.it/~luci...Css/testB.html Y Y
http://sax.iasf-milano.inaf.it/~luci...testBcorr.html N N
http://sax.iasf-milano.inaf.it/~luci...Css/testC.html Y N
http://sax.iasf-milano.inaf.it/~luci...testCcorr.html N N
http://sax.iasf-milano.inaf.it/~luci...Css/testD.html N N
http://sax.iasf-milano.inaf.it/~luci...Css/testE.html N Y
http://sax.iasf-milano.inaf.it/~luci.../testEsin.html N Y
http://sax.iasf-milano.inaf.it/~luci.../testEvar.html N but

Examples A and B are the ones I was referring to in my earlier posts.
They worked with the behaviour I wanted (header and side area fixed,
main area scrolling) ... but unfortunately were affected by typos. So
did they work by chance ?

Example C should be the one conforming to Ben C's suggestion (everything
absolute) ... not working but affected by typo.

A,B and C "corr" have the typo corrected (I put a semicolon where it
should) ... as a consequence NONE OF THEM WORK ANY MORE

D and E should be equivalent to dorayme's pseudoFrames.html and
positionFixed.html. Only the second one works with the behaviour I want.

I presume the effect of the typo on A,B was to render them equivalent
to E.

So I could say that I have a working starting point (header and
navigation area fixed on the screen, main area scrollable).

They work under "my" phylosophy (page uses entire screen width).

Now I'd like to make them work under "my colleagues'" phylosophy,
modified. I.e. the document should have a default absolute width (in cm
or pixels). If the user's screen is wider, the document shall be
contained in the default width and the part on the right be unused.
However if the screen is or is resized smaller one should use the entire
screen, with NO NEED of HORIZONTAL scrollbars.

This is demonstrated on a "single frame" document by testEsin.html (note
the unused area on the right).

testEvar.html is an attempt of doing the same on a pseudoframed document
but as you can see the effect I want to achieve applies only to "main"
and not to the entire document ...

By the way, I'm pretty sure I could achieve what I want with a real
frameset. I used framed documents with no restrictions, but I see that
somebody prefers to avoid them (has this preference a real jsutification
?)

--
----------------------------------------------------------------------
nospam@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.

re: CSS2: what is the container of everything ?

On 2008-10-16, LC's No-Spam Newsreading account <nospam@mi.iasf.cnr.itwrote:Give main a defined height (probably by setting top and bottom and
leaving height as auto) but make it overflow: auto.

That way the user scrolls main to get to the contents, not the viewport.
The viewport never scrolls. That keeps myhead and sub from moving.
The first one (http://dorayme.890m.com/alt/pseudoFrames.html) is what
I'm talking about. The reason I suggest not using fixed is because you
want to set max-width or min-width (I can't remember which) on the
container for all these elements.

You can't do that if they're position: fixed, because in that case their
container is the viewport, and only the user can set the dimensions of
the viewport.

I think that was your original problem.
You may just have a fast computer. I still get visible jerkiness in FF3
on GNU/Linux.

re: CSS2: what is the container of everything ?

In article
<alpine.LSU.1.00.0810161641030.10091@cbfrvqba.ynzo engr.vans.vg>,
LC's No-Spam Newsreading account <nospam@mi.iasf.cnr.itwrote:
"somebody prefers"!

Talk about understatement! You can get lynched by "nearly everybody"
around these parts for using frames. <g>

Btw, yes, it has real justification.

--
dorayme

re: CSS2: what is the container of everything ?

On 2008-10-16, LC's No-Spam Newsreading account <nospam@mi.iasf.cnr.itwrote:Start with testCcorr.html.

Change #main to:

#main {position: absolute; top: 9.0em ;
left: 0; right: 0; bottom: 4.5em; overflow: auto;
height: auto; width: 76%; padding: 2%; z-index: 0}

Put this at the top:

html, body { height: 100%; padding: 0; margin: 0 }
body {width: 20cm; max-width: 80%; position: relative}

What's wrong with that?

re: CSS2: what is the container of everything ?

On Fri, 17 Oct 2008, dorayme wrote:Could you enlighten me on what it is nowadays ? I believed a
justification in the PAST was that some OLD browsers won't support them.

I personally find frames useful (e.g. in document manuals produced by
both Rtf2Html and Latex2Html to provide a navigable content pane), and
they've never disturbed me. While I get disturbed by documents who
impose a fixed width, which might not match my current viewport (*).
Otherwise said, I'm not disturbed at all by vertical scrollbars, but I'm
quite disturbed by horizontal ones.

(*) my personal preference in the past was to keep the browser window
rather small (say 95% the height and 60% the width of the screen, which
is a 1280x1024). Nowadays I keep it a bit wider (say 1100x1024) to have
a larger tab bar with many tabs, but still can see something hidden
under the browser. However I have a window manager arrangement which
causes popup windows to use the older "tall and narrow" size, and that
sometimes is smaller than the document imposed width.

BTW in the past I ran a survey through our organization and found that
most people prefer a full screen arrangement (for curiosity see
http://sax.iasf-milano.inaf.it/~luci...rowser-survey/ )


--
----------------------------------------------------------------------
nospam@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.

re: CSS2: what is the container of everything ?

On Fri, 17 Oct 2008, Ben C wrote:OK done in http://sax.iasf-milano.inaf.it/~luci.../testCvar.html
well, main scrolls, but has an internal scroll bar. The vertical
functionality is correct, but the look is not what I liked (an overall
scroll bar acting only on main, as in tests A,B,E). If the conclusion
is that I can get EITHER one OR the other behaviour, I'll make a trade
off and choose.

Concerning the horizontal functionality, I'd probably need to play with
the min max widths. What I'd like should be somewhat hybrid between
testCvar and testEvar

testCvar starts with main abutted to sub, and an unused area on the
right (fine). If I narrow the viewport, main and sub remain abutted,
but also the unused area remains visible (not surprising as I have the
80% clause) ... which I do not like.

testEvar starts with sub on the extreme right and an unused area between
main and sub (well, inside main, isn't it ?) which I do not like.
However if I narrow the viewport, at sometime the gray area disappears
(which is the effect I want to achieve)

What I'd like is essentially a combination of the two:

- if viewport is wide should look as testCvar(wide)
- when viewport becomes narrower should look as testEvar(narrow)

Is it something impossible by definition ?


--
----------------------------------------------------------------------
nospam@mi.iasf.cnr.it is a newsreading account used by more persons to
avoid unwanted spam. Any mail returning to this address will be rejected.
Users can disclose their e-mail address in the article if they wish so.

re: CSS2: what is the container of everything ?

On 2008-10-17, LC's No-Spam Newsreading account <nospam@mi.iasf.cnr.itwrote:If you don't like the internal scroll bar then you will have to use
position: fixed.
How about http://www.tidraso.co.uk/misc/pseudoFrames3.html