Surplus 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 at that
may be adding to my page width? I've tried changing the right margin
for the rightcolumn but even if I move it 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 this problem has been posted at:
http://www.kencoffman.com/pagewidthproblem.htm

[Spartanicus]

"ima" <im*********@yahoo.com> wrote:

I'm attempting to use CSS for a three column layout.

We heard you the first time you posted, no point in posting the same
question again.

--
Spartanicus

[ima]

> We heard you the first time you posted, no point in posting the same

question again.
Spartanicus

It was NOT my intention to post the same question twice. There was at
least 6 hours between my attempts. I was merely challenge to get it
posted once. Did no one else notice that the board did not move for
most of Sunday? But hey, thanks for being there to help out.

[Spartanicus]

"ima" <im*********@yahoo.com> wrote:

It was NOT my intention to post the same question twice. There was at
least 6 hours between my attempts. I was merely challenge to get it
posted once. Did no one else notice that the board did not move for
most of Sunday?

Particular to your news server, not a reason to repost.

--
Spartanicus

[Arne]

Once upon a time *ima* wrote:

We heard you the first time you posted, no point in posting the same
question again.
Spartanicus

Did no one else notice that the board did not move for
most of Sunday?

No, and that's because we use a proper newsreader, subscripe to a
proper news server, not the PITA GoogleGroups. :)

--
/Arne
Now killing all posts originating at GoogleGroups
Workaround: http://www.safalra.com/special/googlegroupsreply/

[C A Upsdell]

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.

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 at that
may be adding to my page width? I've tried changing the right margin
for the rightcolumn but even if I move it 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 this problem has been posted at:
http://www.kencoffman.com/pagewidthproblem.htm

Well, your CSS is invalid. Start off by fixing this.

You did not say which browser had the problem. If your problem persists
after you fix your CSS, and the browser is IE, reduce the percentages a
bit so that the total is less than 100%.

[ima]

An example of this problem has been posted at:
http://www.kencoffman.com/pagewidthproblem.htm
Well, your CSS is invalid. Start off by fixing this.

I don't claim it's pretty but W3C and WDG validators both disagree with
you and found no errors. I checked this BEFORE posting the request for
assistance.
You did not say which browser had the problem. If your problem persists
after you fix your CSS, and the browser is IE, reduce the percentages a
bit so that the total is less than 100%.

Both Opera 8.02 and FF 1.0.6 oddly enough, IE 6 does not share this
particular problem. Maybe that will be a helpful clue if you happen to
have a lot of experience with IE's "special" workings. I'm still very
new to CSS (as you might have guessed by my attempt to use it).

[C A Upsdell]

ima wrote:

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

Well, your CSS is invalid. Start off by fixing this.

I don't claim it's pretty but W3C and WDG validators both disagree with
you and found no errors. I checked this BEFORE posting the request for
assistance.

WRONG. The W3C CSS validator produced this:

-----

Errors

URI : http://www.kencoffman.com/css/saa4.css

* Line: 3 Context : div#container

Invalid number : width Parse Error - width=100%

* Line: 7 Context : div#mainwrapper

Invalid number : width Parse Error - width=100%

* Line: 18 Context : div#content

Invalid number : width Parse Error - width=60%

-----

There are also a bunch or warnings.

You did not say which browser had the problem. If your problem persists
after you fix your CSS, and the browser is IE, reduce the percentages a
bit so that the total is less than 100%.

Both Opera 8.02 and FF 1.0.6 oddly enough, IE 6 does not share this
particular problem. Maybe that will be a helpful clue if you happen to
have a lot of experience with IE's "special" workings. I'm still very
new to CSS (as you might have guessed by my attempt to use it).

With FF 1.0.6 and Opera 7.54 I see no horizontal scroll bar until the
browser window width drops below a certain value, something over 600px.

With Opera 8.50 I never see a horizontal scroll bar.

[ima]

> WRONG. The W3C CSS validator produced this:

Errors
URI : http://www.kencoffman.com/css/saa4.css
* Line: 3 Context : div#container
Invalid number : width Parse Error - width=100%
* Line: 7 Context : div#mainwrapper
Invalid number : width Parse Error - width=100%
* Line: 18 Context : div#content
Invalid number : width Parse Error - width=60%

Yet another lesson learned: Apparently the validators check the htm
page and the css page separately. I did not realize that until you
referenced the css file above. I will go slither back and try to find
out why I can not use percentages for my widths as well as check the
warnings that you mentioned. It's all embarassing but I would never
have learned that the validator checks css independant of the html if
you had not taken the time to point it out. I thank you for that.

As for your results with Opera, I don't have a clue why you wouldn't
get the scroll bar and I do. I'm still learning to use the validators
properly! What do I know? I will do what I can to clean up the code
but I have little hope of solving this mystery. At least its fairly
minor in the scheme of things (of course if I'm the only one that sees
this problem, it may not exist). Just looking for a silver lining.

[Jan Roland Eriksson]

On 21 Sep 2005 10:08:39 -0700, "ima" <im*********@yahoo.com> wrote:

WRONG. The W3C CSS validator produced this:
Errors
URI : http://www.kencoffman.com/css/saa4.css
* Line: 3 Context : div#container
Invalid number : width Parse Error - width=100%
* Line: 7 Context : div#mainwrapper
Invalid number : width Parse Error - width=100%
* Line: 18 Context : div#content
Invalid number : width Parse Error - width=60%

...I will go slither back and try to find out why I can not use
percentages for my widths...

Nothing wrong with percentages but why do you think that an '='
character should be used as an assignment operator for width when you
are using the correct ':' character in all other places?

Change to 'width: 100%' and you should be fine.

--
Rex

[ima]

> Nothing wrong with percentages but why do you think that an '='

character should be used as an assignment operator for width when you
are using the correct ':' character in all other places?

Change to 'width: 100%' and you should be fine.

Thanks Rex I'm so used to HTML I couldn't see the error. I'll study
some more before posting for more help.