ansaurus

Question

Does the percentage value refer to the width of the containing block?

Answer 1

+2 A:

Yes, the CSS will be applied to the element containing it.
The default width in percentages for the <body> tag is 100%.

In general, you should be using a CSS file linked to your HTML, and use CSS Selectors to chose what elements to style. It is bad practice to embed CSS into your HTML, as this is not very maintainable (i.e. if you need to change the style across a website).

Edit:

#E { padding: 50%; }

is a shortcut to:

#E { padding-top: 50%; padding-right: 50%; padding-left: 50%; padding-bottom: 50%;}

In regards to what the % stand for, it's viewport width, i.e. the number of pixels in the inner browser window, showing the HTML, nothing to do with your screen resolution.

If you were to change your window resolution to 800px*600px your viewport width would be somewhat less than 800px, as the scrollbar takes up some of that.

Oded 2009-12-20 19:33:43

hi, in case you find the time ... I've edited my initial post in response to your replies. BTW - I do use external CSS file

carewithl 2009-12-20 20:14:35

"In regards to what the % stand for, it's viewport width, i.e. the number of pixels in the inner browser window, showing the HTML, nothing to do with your screen resolution" But greater the screen resolution, the more pixels will viewport contain?!

carewithl 2009-12-21 19:55:25

And if you keep your window on a 600px by 400px size? Not everyone has their browser window maximized, you know...

Oded 2009-12-21 20:31:26

thank you all for your help

carewithl 2009-12-21 21:52:45

Answer 2

+1 A:

The default width of body is 100%, but html is the parent container of body, so it will affect body in some circumstances if you're not aware of it.

Tor Valamo 2009-12-20 19:39:00

hi, in case you find the time ... I've edited my initial post in response to your replies

carewithl 2009-12-20 20:14:00

Answer 3

+1 A:

“My screen resolution is set to 1024*768, and thus in my case the width of a <body> is 1024px?”

As Tor mentioned, the <html> element can have margin, borders and padding of its own.

In addition, the browser window’s scrollbars can take up some space too.

Paul D. Waite 2009-12-20 20:21:34

Under what conditions would <html> element have its own margin, borders and padding?

carewithl 2009-12-20 20:29:30

I may be remembering this wrong, but I think some browsers put a little border on the HTML element. I always tend to set margin, border and padding on <html> and <body> to zero.

Paul D. Waite 2009-12-20 20:57:04

Answer 4

+1 A:

A) I assume that when we use percentages, the percentage value refers to the width of the containing block?

It varies depending on the property the percentage is assigned to. For font-size, for example, it is the computed font-size of the parent element.

Padding is calculated based on the computed width of the parent block — even padding-top uses the width. (Remember, the width is the content width and excludes padding, borders and margins).

B) What is the default width of a element?

The default width of the body element is auto which is "Whatever space is left once margin, padding and borders have been taken into account". Since browsers have non-zero padding and/or margin there by default (which of the two depends on the browser), this is not 100%.

David Dorward 2009-12-21 20:42:40

I assume by “browsers having non-zero padding…” you mean the body element has non zero padding and margin? Anyways, thanx for helping me

carewithl 2009-12-21 21:53:21

ansaurus

tags:

views:

answers:

Does the percentage value refer to the width of the containing block?

related questions