Stylesheets - STRICTly speaking, what is 100%?

Author

STRICTly speaking, what is 100%?

Mike

2006-05-08, 6:54 pm

I'm trying to create a page: Three sections (left, topright and
bottomright), each with a heading and scrolling (overflow) content.
The size of these sections should be based upon the size of the user's
viewable area in their browser. I'm close... really close, but I'm
confused over how to mix specific measurements with percentages.

When I began, things were quite nice:
(http://play.psmonopoly.com/autosize.html). A little clunky in IE, but
firefox and ie both worked pretty well.
Then I started trying to add a 1em high heading for each section, add
some small margins and padding and everything went downhill
(http://play.psmonopoly.com/autosize1.html).

Can someone please explain what 100% really means, and is there a way
that 100% means all the area available minus the padding of the parent
container?

Thanks!

Mike

ironcorona

2006-05-08, 6:54 pm

Mike wrote:

> Can someone please explain what 100% really means,

It means 100% of the content area

http://www.w3.org/TR/REC-CSS2/box.html

> and is there a way
> that 100% means all the area available minus the padding of the parent
> container?

Only in IE :)

--
Brian O'Connor (ironcorona)

ironcorona

2006-05-08, 6:54 pm

ironcorona wrote:
[color=darkred]

Sorry, I just re-read that. That's exactly what it means. If I set an
element's width to 100% it will take up *all* of its parent element's
content area.

--
Brian O'Connor (ironcorona)

David Dorward

2006-05-08, 6:54 pm

Mike wrote:

> Can someone please explain what 100% really means, and is there a way
> that 100% means all the area available minus the padding of the parent
> container?

It depends what property you are talking about.

In the case of height it means "As tall as the container, providing the
container is not height: auto in which case it becomes height: auto
instead".

In the case of width it means exactly what it sounds like, but remember that
the width is the _content_ width and that padding, border and margin go
outside it.

On elements that are display: block, a width of auto is "whatever space is
left over after border, margin and padding are accounted for".

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Mike

2006-05-09, 3:42 am

That's what I thought, but it doesn't seem to be working that way. All
is fine, until I add some margin or padding and divs seem to bleed
outside the browser window. Take a look at the sample pages, they're
both pretty simple. Any advice?

Thansk!

Mike

David Dorward

2006-05-09, 3:42 am

Mike wrote:

> That's what I thought

What is what you thought? http://www.safalra.com/special/googlegroupsreply/

> , but it doesn't seem to be working that way. All
> is fine, until I add some margin or padding and divs seem to bleed
> outside the browser window.

So you have an element with content width of 100% of the parent elements
content area, then you add margin or padding. 1005 + something greater than
zero is going to equal more than 100%.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

phil-news-nospam@ipal.net

2006-05-09, 7:20 pm

On 8 May 2006 21:47:21 -0700 Mike <mpearl1@XXXXXXXXXX> wrote:

| That's what I thought, but it doesn't seem to be working that way. All
| is fine, until I add some margin or padding and divs seem to bleed
| outside the browser window. Take a look at the sample pages, they're
| both pretty simple. Any advice?

Is this what you are seeing?

https://bugzilla.mozilla.org/show_bug.cgi?id=167408

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

Mike

2006-05-09, 7:20 pm

David wrote:

>So you have an element with content width of 100% of the parent elements
>content area, then you add margin or padding. 1005 + something greater than
>zero is going to equal more than 100%.

Here's an example to illustrate the problem I'm having. I set up two
divs (left-content and right-content), I'd like a 1em margin around
both divs, as well as inbetween them. My goal is to have the content
in these two divs what real estate remains after those margins, and
resize as the browser resizes.

Here's what I did:

=B7 Set html rules to 100% width & height, with 0 margin to establish
inheritance.
=B7 Set body to 100% width & height, but added a 1em margin to surround
the page.
=B7 Created the two content divs "left-content" and
"right-content", set height and width to 100% , added some color,
padding and a little text.
=B7 To establish the 1em "margin" between the two divs, I created
parent divs "left" and "right". Both of these are float:left
so they display side by side, height:100% and width:50%, but I added a
..5em padding in the center to establish the 1em "margin" between
the nested content divs. (code below).

I expected that this would work, but when testing in Foxfire and IE7,
it doesn't. If you reduce #left,#right {width:40%}, you'll see that
the 1em "margin" between the two divs doesn't appear in Foxfire or IE7.

Clearly, my understanding of how this works is off. How would you make
this work?

Thanks!

Mike

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=3D"http://www.w3.org/1999/xhtml" xml:lang=3D"en" lang=3D"en">
<head>
<style type=3D"text/css" media=3D"screen">
html {
height: 100%;
width: 100%;
margin: 0;
}
body {
height: 100%;
width: 100%;
margin:1em;
}
#left {
padding-right:1em;
}
#right {
padding-left:1em;
}
#left,#right {
float:left;
width:40%;
height:100%;
}
#left-content {
height:100%;
width:100%;
padding:1em;
background-color:red;
}
#right-content {
height:100%;
width:100%;
padding:1em;
background-color:blue;
}
</style>
</head>
<body>
<div id=3D"left">
<div id=3D"left-content">Left Content.</div>
</div>
<div id=3D"right">
<div id=3D"right-content">Right Content.</div>
</div>
</body>
</html>

Jim Moe

2006-05-09, 7:20 pm

Mike wrote:
> David wrote:
>
>
> Here's an example to illustrate the problem I'm having. I set up two
> divs (left-content and right-content), I'd like a 1em margin around
> both divs, as well as inbetween them. My goal is to have the content
> in these two divs what real estate remains after those margins, and
> resize as the browser resizes.
>
> Here's what I did:
>
> · Set html rules to 100% width & height, with 0 margin to establish
> inheritance.
> · Set body to 100% width & height, but added a 1em margin to surround
> the page.
> · Created the two content divs "left-content" and
> "right-content", set height and width to 100% , added some color,
> padding and a little text.
> · To establish the 1em "margin" between the two divs, I created
> parent divs "left" and "right". Both of these are float:left
> so they display side by side, height:100% and width:50%, but I added a
> .5em padding in the center to establish the 1em "margin" between
> the nested content divs. (code below).
>
A div's default width is auto, or 100% of the container.
As others have noted the total width is the percentage PLUS margin,
padding and border. So 50% width for the two divs used all the width with
no room for the other box features.

> I expected that this would work, but when testing in Foxfire and IE7,
> it doesn't. If you reduce #left,#right {width:40%}, you'll see that
> the 1em "margin" between the two divs doesn't appear in Foxfire or IE7.
>
You do not understand the CSS box model.
See <http://www.w3.org/TR/REC-CSS2/box.html>.
Change "padding" to "margin".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Mike

2006-05-09, 7:20 pm

Thanks Jim,

Okay, I now understand that 50% is the width of the container, not
factoring in padding, margin or border. Honestly, I'm not sure what
value that is, or why I would ever use it unless I have no other
features. Since I do need those features, and would like to figure out
how to accomplish the following across the width:

margin:1em
padding:1em
width:50% of width - width of features
padding:1em
margin:1em
padding:1em
width:50% of width - width of features
padding:1em
margin:1em

I see two options, and am hoping someone else sees a better way:

(1) use Javascript, and accept that CSS can't go there.
(2) come close by using a smaller percentages.

I gather there is no way to write a CSS rule to have the browser
calculate it all (e.g., 50%-feature width)? Perhaps there's some way
to nest divs in such a way that 100% is truly equal the width I'm
shooting for? If someone can see a solution, please let me know.

thanks!

Mike

phil-news-nospam@ipal.net

2006-05-09, 7:20 pm

On Tue, 09 May 2006 04:33:20 +0800 ironcorona <iron.corona@XXXXXXXXXX> wrote:
| ironcorona wrote:
|
|>> and is there a way
|>> that 100% means all the area available minus the padding of the parent
|>> container?
|
| Sorry, I just re-read that. That's exactly what it means. If I set an
| element's width to 100% it will take up *all* of its parent element's
| content area.

And then some (more).

I think maybe this guy might be running into the same bug I have.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

2006-05-09, 7:20 pm

Mike wrote:
> Can someone please explain what 100% really means, and is there a way
> that 100% means all the area available minus the padding of the parent
> container?

That was discussed rather profoundly in the thread [DOCTYPE Strict uses
"correct" box model - so why is 100% width now useless?], see for
example
<http://groups.google.com/group/comp...3a733f399e3f736>

W3C Box Model vs IE Box model is the issue.

In W3C Box Model you cannot use both 100% width and
margin/padding/border without a minor or severe layout damage. You have
to use extra wrappers around of each involved element in such case.

Of course 100% should be the width of the element, not the width of the
content IMHO. But it is as it is: IE Box is reasonable and convenient
but not standard; W3C Box is a pain in one place but standard. A plague
o' both your houses! :-)

Shadow Lynx

2006-05-10, 6:49 pm

"VK" <schools_ring@yahoo.com> wrote in message:
> That was discussed rather profoundly in the thread [DOCTYPE Strict uses
> "correct" box model - so why is 100% width now useless?], see for
> example
> <http://groups.google.com/group/comp...3a733f399e3f736>
>
> W3C Box Model vs IE Box model is the issue.
>
> In W3C Box Model you cannot use both 100% width and
> margin/padding/border without a minor or severe layout damage. You have
> to use extra wrappers around of each involved element in such case.
>
> Of course 100% should be the width of the element, not the width of the
> content IMHO. But it is as it is: IE Box is reasonable and convenient
> but not standard; W3C Box is a pain in one place but standard. A plague
> o' both your houses! :-)
>
I started that very thread (VK, thanks for referencing it) and sadly, the
answer to your question is that there is no answer. I agree 100% (and I
mean 100%, not 102% or 98%) with VK that the IE Box has some advantages over
the W3C box such as this very issue. If you read that thread I started,
you'll see I started to go rather insane about this and said some rather
nasty things that weren't really meant for those responding but rather
outrage at the W3C for their "perfect" box model.

All that aside, I did figure one thing out at the end that did help a bit,
which has already been mentioned - adding a single specific margin to a
parent DIV. See this page for an example:
http://www.digitolle.net/google/hotboxmodelaction.htm.

And since we're on the topic, let's add some more fun:

Can anyone figure out how to create a table that fits into a fixed-size DIV
where the table's width = 100% of the content area of the DIV and the DIV
shows a vertical scroll bar only when the table's height is too large to
fit?

In Firefox, there's no challenge at all because 100% width works as you'd
hope with the DIV having overflow:auto, but in IE, it doesn't seem to care
if there's a scroll-bar because it doesn't calculate available width in the
DIV differently if there's one there or not. Here's the sample page:
http://www.digitolle.net/google/funwithscrolling.htm (look at it with IE and
Firefox to see the differences, but the task is to get it to work in IE,
since Firefox is fine.)

2006-05-11, 6:58 am

Shadow Lynx wrote:
> In Firefox, there's no challenge at all because 100% width works as you'd
> hope with the DIV having overflow:auto, but in IE, it doesn't seem to care
> if there's a scroll-bar because it doesn't calculate available width in the
> DIV differently if there's one there or not. Here's the sample page:
> http://www.digitolle.net/google/funwithscrolling.htm (look at it with IE and
> Firefox to see the differences, but the task is to get it to work in IE,
> since Firefox is fine.)

Big Brother always loves you. Do you love him? :-))

(Just use one of regular hacks to hide expression from other browsers
and - if you care - from CSS Validator)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>$Template$</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
</head>

<body>
<div style="width:200px; height:50px; overflow:auto; border:1px solid
blue;">
<table style="width:expression(this.clientWidth)">
<tr>
<td>Stuff</td>
<td align="right">Stuff</td>
</tr>
<td>Stuff</td>
<td align="right">Stuff</td>
</tr>
<td>Stuff</td>
<td align="right">Stuff</td>
</tr>
<td>Stuff</td>
<td align="right">Stuff</td>
</tr>
<td>Stuff</td>
<td align="right">Stuff</td>
</tr>
<td>Stuff</td>
<td align="right">Stuff</td>
</tr>
</table>
</div>
</body>
</html>

2006-05-11, 6:58 am

VK wrote:
> Big Brother always loves you. Do you love him? :-))

Big Brother is in reference of Microsoft, is a joke, is not intended to
endorse or promote Microsoft box model.

I guess I spelled all disclaimers. :-)

Shadow Lynx

2006-05-12, 6:47 pm

"VK" <schools_ring@yahoo.com> wrote:
> Big Brother always loves you. Do you love him? :-))

Is it bad if I often want to stab Big Brother in the eye? I'm thinking
about becoming a garbage man and buying a Mac.

> (Just use one of regular hacks to hide expression from other browsers
> and - if you care - from CSS Validator)
> ...
> <table style="width:expression(this.clientWidth)">
> ...

I've considered using expressions like that one (I even spent a day working
out some ridiculously complex expressions to force IE to "override" the way
it handles its box model in Strict), but I was hoping there was a less
non-standard way to do it (wow, so many negatives in the sentence, and yet
it does actually make sense.) Standards are worthless when they're not
standard! (o;

phil-news-nospam@ipal.net

2006-05-12, 6:47 pm

On Fri, 12 May 2006 12:40:15 -0500 Shadow Lynx <shdwlynxjunk@yahoo.com> wrote:
| "VK" <schools_ring@yahoo.com> wrote:
|> Big Brother always loves you. Do you love him? :-))
|
| Is it bad if I often want to stab Big Brother in the eye? I'm thinking
| about becoming a garbage man and buying a Mac.

I can think of better places than the eye.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

Martin Eyles

2006-05-15, 7:07 pm

"Shadow Lynx" <shdwlynxjunk@yahoo.com> wrote in message
news:51ad2$446253f9$4087c713$5942@FOXVALLEY.NET...
> "VK" <schools_ring@yahoo.com> wrote in message:
> I started that very thread (VK, thanks for referencing it) and sadly, the
> answer to your question is that there is no answer. I agree 100% (and I
> mean 100%, not 102% or 98%) with VK that the IE Box has some advantages
> over the W3C box such as this very issue. If you read that thread I
> started, you'll see I started to go rather insane about this and said some
> rather nasty things that weren't really meant for those responding but
> rather outrage at the W3C for their "perfect" box model.
>
> All that aside, I did figure one thing out at the end that did help a bit,
> which has already been mentioned - adding a single specific margin to a
> parent DIV. See this page for an example:
> http://www.digitolle.net/google/hotboxmodelaction.htm.

Something like this might work

html div structure

<div id="outer">
<div id="left"></div>
<div id="right"></div>
</div>

css for this

outer {padding-left: [left's left margin and padding and right margin and
padding added together];
padding-right: [right's left margin and padding and right margin and
padding added together]
margin: 0; width: auto}
left {width: 50%; position: relative; left: -[left's right margin and
padding]}
right {width: 50%; position: relative; left: [right's left margin and
padding]}

--
Martin Eyles