margins, boxes and positioning

[Secret Guy]

I'm trying to understand generally how to make a grid of variously sized
boxes using CSS. The first idea I had was to make a box where I can see
the margin, padding, border and content edges, and understand why they
have the areas that they do. And I'm having trouble...

I read in the 2.1 spec, that the height and width properties specify the
height and width of boxes generated by applicable elements, and that a
percentage value is taken relative to the "height and width" of the
box's containing block.

In the box model chapter, it seems to me to say that the height and
width of a block refers to the area within the content edge of a box,
and that padding, margin etc. extend outside of that.

There's only one case where I feel certain about the height and width of
a containing block, which is when the containing block is the viewport
(I'm ignoring paged media for now). And, the only way I've come up with
so far to create a box with height and width relative to the containing
block, rather than the content of the block, is to use absolutely
positioned block-level elements with all of top, right, bottom and left
specified (which IE doesn't seem to support). For example (change the
square brackets to angle brackets):

[?xml version="1.0"?>
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
[html>[!--
-->[head>[!--
-->[title>One Box[/title>[!--
-->[style type="text/css">
body {
background-color: green;
}
#div1 {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: white;
}
#div11 {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: purple;
}
#div111 {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: yellow;
}
[/style>[!--
-->[/head>[!--
-->[body>[!--
-->[div id="div1">[!--
-->[div id="div11">[!--
-->[div id="div111">[!--
-->[p>Essss eee oooo tititttt nononnnn uuu eee tititttt essss ngggg eee
tt eee nononnnn eee uuu uuu mmmm essss ff essss ff eee eee uuu eee eee
eee uuu mmmm eee eee uuu uuu uuu uuu uuu uuu uuu uuu. Eskss tt rnn eskss
lslss tertrr innnioninn ineiee eskss tertrr tertrr oeoileiee oeoileiee
mhmm ngigg ff tee ff ineiee mhmm eskss rnn odd oee yuu ecescss oeoileiee
ngigg tee llill tee mhmm yuu mhmm uee yuu yuu uee yuu yuu. Sllll
llxtitittty adrdddy nnnnne llxtitittty sllll uiiil llxtitittty
llxtitittty of neleeed oou sllll hhe llxtitittty lld oou eeem uiiil
meees sllll meees hhe uiiil sllll tnnng sllll elilmllle oou uiiil sllll
hhe oou sse oou tnnng oou oou oou oou. Dfntoiooon ilxbltittty ieleeed
uun ilxbltittty ntocooon it deaavnaeteees eeem hhe ieleeed hhe it hhe
ilxbltittty ntocooon nne ieleeed it uun sllll oou hhe oou eeem tnnng
uiiil eoplmllle oou hhe sllll hhe eeem uiiil oou tnnng oou oou oou oou.
Iuiiiinn tt ff tee aaaaayy tee iiill odd tee tt iuiiiinn iiill ff
rccccss tt uee uee rccccss iiigg iiiiee uee iiciiiiee uee oee rnn uee
tee hhmm uee iiigg uee uee uee tee uee uee uee uee yuu yuu.[/p>[!--
-->[/div>[!--
-->[/div>[!--
-->[/div>[!--
-->[/body>[!--
-->[/html>
If I change the styles to have a 5px margin on all sides of div11 and
div111:

#div1 {
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
background-color: white;
}
#div11 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
background-color: purple;
}
#div111 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
background-color: yellow;
}

by rule #6 in:

http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height

the browser should solve for bottom and right, in div11 and div111.

What I get in mozilla 1.7 appears to be div11 and div111 having height
and width equal to the height and width of div1, but with margins
extending outside by 5px.

Both of the examples pass the w3c css validator without errors.

Since IE doesn't seem to support specifying left and right or top and
bottom, on absolutely positioned block-level non-replaced elements, and
since the "height and width" of a box doesn't include it's margins, how
can I create boxes that are specfically n pixels narrower and shorter
than their containing blocks, in a relatively cross-browser way?

Incidentally, I'm hoping a solution will not involve using float, since
it seems to me that float should be for floating and I worry that there
might be unforseen problems with hacking float to achieve a non-float
related layout.

[Secret Guy]

How can I make a box that is n pixels narrower and shorter than it's
containing block, without using left and right and top and bottom?

[Brian]

Secret Guy wrote:

How can I make a box that is n pixels narrower and shorter than it's
containing block, without using left and right and top and bottom?

set padding on the containing block.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Secret Guy]

Well, ok part of the confusion for me is the spec's notion of block
size. What I mean by size really is what looks to me like the size of
the box: it's content, and it's padding, border and margin. While the
spec calls the size of the block, the area surrounded by the content
edge, with the padding, border and margin extending outside of that.

http://www.w3.org/TR/CSS21/box.html#box-dimensions
http://www.w3.org/TR/CSS21/visudet.h...replaced-width
http://www.w3.org/TR/CSS21/visudet.h...eplaced-height

So, from my reading of the spec, and from what I see in mozilla, the
result of adding padding to the containing block is that the inner box
is not visually smaller compared to the containing block + it's padding
(nor is it smaller using the spec's notion of block heigh/width).

If you look at the html I have in the original message, in mozilla and
use the styles:

#div1 {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background-color: white;
}
#div11 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
padding: 5px;
background-color: purple;
}
#div111 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
background-color: yellow;
}

you should see what I see which is that div11 is visually larger than
it's containing block and div111 is not visibly smaller than it's
containing block.

[Brian]

Secret Guy wrote:

Well, ok part of the confusion for me is the spec's notion of block
size. What I mean by size really is what looks to me like

Whom are you replying to? (Hint: quote part ot the message so there's
some context.)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Secret Guy]

If your news reader supports message threading, you will know what
message this is in reply to, and be appropriately annoyed by the post
about posting message which are only about posting. My apologies.

[Brian]

Secret Guy wrote:

If your news reader supports message threading, you will know what
message this is in reply to,

(What are you replying to? Perhaps it was to a recent message I wrote
asking someone much the same question. Since you didn't quote
anything, I cannot be sure. I'll assume that I guessed correctly.)

My reader does support threading. But I'm not going to switch views
just for you because you're too lazy to quote and trim messages as
appropriate.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Mon, 05 Jul 2004 00:17:49 -0700, Secret Guy <no****@nope.no> wrote:

If your news reader supports message threading, you will know what
message this is in reply to, and be appropriately annoyed by the post
about posting message which are only about posting. My apologies.

If the message propogates fastrer than its predecessor it CANNOT thread.
Stop being an ass. Please cite.

[Secret Guy]

Neal wrote:

If the message propogates fastrer than its predecessor it CANNOT thread.
Stop being an ass. Please cite.

Please only post message with proper spelling in them from now on. Also,
I will not help anyone who forms sentences with the words "cite" "an" or
"predecssor". Be warned. I am the usenet authority. I have no time for
you now. Talk to the hand.

[brucie]

in post: <news:10************@news.supernews.com>
Secret Guy <no****@nope.no> said:

Please only post message with proper spelling in them from now on. Also,
I will not help anyone who forms sentences with the words "cite" "an" or
"predecssor". Be warned. I am the usenet authority. I have no time for
you now. Talk to the hand.

<quote>[...] don't send mail or post messages solely to point out other
people's errors in typing or spelling. These, more than any other
behavior, mark you as an immature beginner.</quote> rfc1855

--
b r u c i e

[Secret Guy]

The usenet authority is feeling unusally charitable today and wishes to
share his joy.

brucie wrote:

<quote>[...] don't send mail or post messages solely to point out other
people's errors in typing or spelling. These, more than any other
behavior, mark you as an immature beginner.</quote> rfc1855

"Don't get involved in flame wars. Neither post nor respond to
incendiary material." rfc1955

D'Oh!

"Don't presume to act as a cop in what is a community of like minded
individuals working on a common interest." xyz434.7

[Brian]

Secret Guy wrote:

I am the usenet authority. I have no time for you now.
Talk to the hand.

Talk to the killfile. *plonk*

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Neal]

On Mon, 05 Jul 2004 23:19:59 -0700, Secret Guy <no****@nope.no> wrote:

Neal wrote:

If the message propogates fastrer than its predecessor it CANNOT
thread. Stop being an ass. Please cite.

Please only post message with proper spelling in them from now on. Also,
I will not help anyone who forms sentences with the words "cite" "an" or
"predecssor". Be warned. I am the usenet authority. I have no time for
you now. Talk to the hand.

Talk to the *plonk*.