You can see what my concern is by looking at:
http://www.members.westnet.com.au/jelliott/

To start building a new page I first defined three divisions:
headercontainer;
navbar;
content.

To assist viewing I have temporarily given each a border, as well as giving 'body' a border, and I have inserted an empty paragraph between each container.

As you can see at http://www.members.westnet.com.au/jelliott/ , the content container, div id="content", is wider than the body, and the navbar, and the headercontainer. One would presume the body would automatically take up 100% of the width of available screen, and the other two containers have been defined with '{width: 100%;}'

I would be very much obliged if any of you could tell me where I am going wrong.

Many thanks,

James

Remove padding: 1%; from #content and everything will be fine

Hi Stjepan - that did the trick and, as you said, everything is fine now - many thanks.

However, for my education, could you please tell me why the 1% padding caused my 'contents' container to be wider than my html body, or, for that matter, my other two containers?

I often put a bit of padding inside (*) my containers so that the text is not hard up against the left-hand-margin ... looks better that way, I think. I cannot understand how a container, even with padding, can be wider than html body, which is the ultimate container, is it not?

I am a bit confused on this matter and would really appreciate it is you could put me straigth, when you have time.

once again, many thanks,
James

(*) that is right, isn't it?
- 'margin' is the space around the outside of the container;
- 'padding' is inside the container and the space between the border and the text or other content?

Margin is outside the border. The border is outside the padding. The padding is outside the content box. So the effective width is the width specified plus the width of the padding, border, and margin.

We all are. Except Darin and Pandy