Why is there extra white space on the side of my site?

[suavedesign]

Hi,
The link to my site is www.trecall.com.

On the right side of the site, there is a lot of extra white space.

Can anyone tell me why and how I can get rid of it?

Thank you!

What do you mean by white space? Do you mean between the top of the page and the navbar? or the side and the navbar?

[almostbob]

.col1, .col2, .col3, .cols { float:left;}

.col1{ width:404px;}
.col2{ width:230px;}
.cols{ width:177px;}
.main {	width: /*1280px;*/2000; /*border:4px solid yellow;*/}

best practice for css dimensions is ems and %, dimensions that auto adjust to screen size and window size, fixed dimensions, the px used in the stylesheets attached to trecall cause screensizes or window sizes other than that used to develop the site to display unexpectedly
the display is exactly as instructed, but the site author did not examine the effect of the css instructions
redo the css dimensions to add to a total of 100%, and the site will work in all screen and window sizes
users will follow the page down forever, but will not scroll sideways, mice dont have sideways wheels

[suavedesign]

almostbob,
what exactly should I change to percent? All widths?
Thanks

[suavedesign]

Hi,
I changed all the widths in my css (tedious job!) from px to percent, and it definitely helped. Thank you.
Now, how can I center the menu, so that there is an equal amount of gray backgound on both sides of the menu? If I add margin-left, it will only be centered on my screen. I tried margin: 0 auto, and that does not work.
Thanks again for your time!

[almostbob]

havent looked at your menuy css, but my menu is unordered lists with css hover effects, the standard css menu (from cssmenu.com thanks guys blatant plug I am not affiliated with cssmenu in any way)

<style type='text/css'>//partial code sample
.menu { width:100%; text-align:center; } //the outer container is set to occupy the whole window width and texst-align works on all elements within
.menu ul { // bla bla bla the menu items are styled for drop down effects
</style>
<div class='menu'>
<ul><li>Menu 1</li><li>Menu1.1></li><li>menu1.2</li><li>menu1.3></ul>
<ul><li>Menu 2</li><li>Menu2.1></li><li>menu2.2</li><li>menu2.3></ul>
<ul><li>Menu 3</li><li>Menu3.1></li><li>menu3.2</li><li>menu3.3></ul></div>

[suavedesign]

okay, this is good for firefox. Thank you!
But IE totally does not read this AT ALL!
The menu just sticks in the same place- the left side of the browser- no matter what!
Any idea why? (Maybe take a look at my code to see what I may have done wrong...)
Thanks a lot!