Surply page width problem

[ima]

I'm attempting to use CSS for a three column layout. My problem is
that although I'm using width % ie. column1 width 20%, column2 width
60%, and column3 20%, I end up with a horizontal scroll bar with a few
more pixels to scroll.

I'm here to ask those of you with more CSS experience than myself
(which is just about everyone), what else should I be looking for that
is adding to my page width? I've tried changing the right margin for
the rightcolumn but even if I move to overlapping the content column
those few pixels of extra page width remain.

I've added background colors to content in each column for debugging
purposes.

Your help would be appreciated.

An example of problem has been posted at link below.
http://www.kencoffman.com/pagewidthproblem.htm

[Beauregard T. Shagnasty]

ima wrote:

I'm attempting to use CSS for a three column layout. My problem is
that although I'm using width % ie. column1 width 20%, column2 width
60%, and column3 20%, I end up with a horizontal scroll bar with a few
more pixels to scroll.

Those add up to 100%. Then there is the default margins outside of
that. Try setting all margins to 0 and see what happens. You may have
to reduce the percentages to a bit less than 100 as well.

Please only ask your question once. Thanks.

--
-bts
-This space intentionally left blank.

[ima]

Beauregard T. Shagnasty wrote:

ima wrote:

I'm attempting to use CSS for a three column layout. My problem is
that although I'm using width % ie. column1 width 20%, column2 width
60%, and column3 20%, I end up with a horizontal scroll bar with a few
more pixels to scroll.
Those add up to 100%. Then there is the default margins outside of
that. Try setting all margins to 0 and see what happens. You may have
to reduce the percentages to a bit less than 100 as well.

Thank you Beauregard for taking the time to look and offer your
suggestions. It is appreciated!

The second line in my css file:
* {margin:0;padding:0;}

I've tried using even 90% width and the elements get tighter together
but the scroll bar remains. Since my last posting on Sunday, I've
discovered that this problem is somehow related to monitor size. A
smaller monitor produces no horizontal scroll bar but my 19" monitor
does. It all seems backwards to me but those appear to be the facts.
If it's only larger monitors that produce this scroll bar I guess I
won't lose sleep over it. My concern was if that was the "normal"
display of my code.
Please only ask your question once. Thanks.

Thank you for the courtesy of being nice about it. I waited over 6
hours for my first post to appear. It didn't, so I tried again Sunday
evening and even that one didn't appear until hours later.

[Beauregard T. Shagnasty]

ima wrote:

Beauregard T. Shagnasty wrote:

ima wrote:

I'm attempting to use CSS for a three column layout. My
problem is that although I'm using width % ie. column1 width
20%, column2 width 60%, and column3 20%, I end up with a
horizontal scroll bar with a few more pixels to scroll.
Those add up to 100%. Then there is the default margins outside
of that. Try setting all margins to 0 and see what happens. You
may have to reduce the percentages to a bit less than 100 as
well.

Thank you Beauregard for taking the time to look and offer your
suggestions. It is appreciated!

The second line in my css file:
* {margin:0;padding:0;}

But you add margins and stuff all through the CSS file (which is
rather hard to read as constructed). You should also use ems instead
of pixels for sizing. I don't have the time to try and decipher all of
that complicated typing.

And change this: font-size:.8em to font-size: 100% (which is
everyone's default size)

I see Verdana... bad designer, no donut.

Use some whitespace, too. Look at the layout of this one of mine:
http://home.rochester.rr.com/bshagnasty/style/shag.css
I've tried using even 90% width and the elements get tighter
together but the scroll bar remains. Since my last posting on
Sunday, I've discovered that this problem is somehow related to
monitor size. A smaller monitor produces no horizontal scroll bar
but my 19" monitor does. It all seems backwards to me but those
appear to be the facts. If it's only larger monitors that produce
this scroll bar I guess I won't lose sleep over it. My concern was
if that was the "normal" display of my code.

Have a read of this template, and see if you get any ideas.
http://benmeadowcroft.com/webdev/css.../3-column.html

"Did no one else notice that the board did not move ..."

It's not a board. It's a newsgroup.

--
-bts
-This space intentionally left blank.

[ima]

> But you add margins and stuff all through the CSS file (which is

rather hard to read as constructed). You should also use ems instead
of pixels for sizing. I don't have the time to try and decipher all of
that complicated typing. I understand what you're saying and I am TRYING to get better at this
but this is the stage I'm at now. I thank you for the examples and I
will study them.
And change this: font-size:.8em to font-size: 100% (which is
everyone's default size) Thanks for the tip. I had read about sizing width to 100% but not
font-size. A question comes to mind though. If I have declared
font-size:1em then wouldn't 100% = 1em?
I see Verdana... bad designer, no donut. OK.. I'll bite, why is Verdana bad? I'd like to learn so that I can
one day feel worthy of that donut.
Use some whitespace, too. Look at the layout of this one of mine:
http://home.rochester.rr.com/bshagnasty/style/shag.css
Have a read of this template, and see if you get any ideas.
http://benmeadowcroft.com/webdev/css.../3-column.html I will study them both.
It's not a board. It's a newsgroup.

OK... Point taken. The difference is lost on me but I'll trust you.

Thanks for the education.

[Beauregard T. Shagnasty]

ima wrote:
[Beauregard wrote:]

But you add margins and stuff all through the CSS file (which is
rather hard to read as constructed). You should also use ems
instead of pixels for sizing. I don't have the time to try and
decipher all of that complicated typing.

I understand what you're saying and I am TRYING to get better at
this but this is the stage I'm at now. I thank you for the
examples and I will study them.

It all takes time. It will be second nature soon.

And change this: font-size:.8em to font-size: 100% (which is
everyone's default size)

Thanks for the tip. I had read about sizing width to 100% but not
font-size. A question comes to mind though. If I have declared
font-size:1em then wouldn't 100% = 1em?

1em is equal to 100%, but Internet Exploder has issues with using em.
A visitor might increase his text size from smaller to medium, and the
actual result could double!

I see Verdana... bad designer, no donut.

OK.. I'll bite, why is Verdana bad? I'd like to learn so that I
can one day feel worthy of that donut.

The font is too large, and developers frequently try to compensate by
setting fonts to .. .8em <g> Visitors without Verdana installed
will need magnifying glasses.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Use some whitespace, too. Look at the layout of this one of mine:
http://home.rochester.rr.com/bshagnasty/style/shag.css Have a
read of this template, and see if you get any ideas.
http://benmeadowcroft.com/webdev/css.../3-column.html

I will study them both.

Learn by example - but pick good examples. :-)

--
-bts
-This space intentionally left blank.