Stylesheets - Surply page width problem

Author

Surply page width problem

ima

2005-09-19, 7:20 am

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

2005-09-19, 7:29 pm

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

2005-09-20, 7:40 pm

Beauregard T. Shagnasty wrote:
> ima wrote:
>
> 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

2005-09-20, 7:40 pm

ima wrote:
> Beauregard T. Shagnasty wrote:
>
>
>
> 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/cs...s/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

2005-09-20, 11:28 pm

> 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/cs...s/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

2005-09-20, 11:28 pm

ima wrote:
[Beauregard wrote:]
>
> 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.

>
> 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!

>
> 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

>
> I will study them both.

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

--
-bts
-This space intentionally left blank.