[AmritxD]

Hi i am new to CSS and HTML , i have created a website but the problem with it is that
if i open website on different computers it gonna show me different page width. So i have to Zoom In or Zoom Out to View the page completely .

So i don't want the page to get off the screen width and don't show me any horizontal scroll bar.

Here is the link.

I have put the whole webpage into div #bodyInner

and this is the CSS of the div

#bodyInner {
width: 1400px ;
  margin-left: auto ;
  margin-right: auto ;
    }

I thought this thing will work, but it didnt..

[drhowarddrfine]

If you fix the width at 1400px then this will always happen. The only way around it is to use percentages and set the width to 100%.

[BetaWar]

It works exactly as you have told it to. It tries to center the website on the page, but has the width of 1400 pixels. Now, the problem there is that not everyone has a monitor which can support that width, and not everyone who has a monitor which can has their browser window that large (both cases would cause overflow as you have noticed).

There are a few ways to fix this. The first one is the easier, but does limit you more, and that is to make your website for the minimum monitory width you want it to work for. So, if you wanted to work on an 800 pixel wide monitor resolution you could make your site's max width 800 pixels (well, minus about 20 pixels to account for a scrollbar).
The second option if to make your site a liquid one. That means that it will resize the content section based on the screen width it is being viewed on. There are more difficulties here, mainly being that if you have large images or items in your content section that ever go larger than the size of the web browser the hozirontal scrollbar will be forced to display. Additionally, you have to worry about setting explicit widths within the content as that could cause deformation.

Hopefully that makes sense.

[AmritxD]

Hi I really appreciate for your advises.
I tried

width:100%;

But i don't know why it causes my rightpanel to keep flying on the page like when I zoom in or zoom out.
You can see by zooming In and Out on the Link(UPDATED WITH width:100;).

Thanks,

And website wont be centred anymore, it will keep on zooming out to left of the webpage and thats ugly .

I dont know why

[suniahk]

From the looks of things, You have each item's width set in pixels. In order for percentage width to work properly (in this case), most if not every element would have to have it's width set as a percentage.

Also, If I might make a suggestion (for using Pixels, also for future reference)... 1400 is a HUGE width. Most people will have a screen resolution of at least 1024x768 (if I remember correctly, most Netbooks are 1024x600). I'd suggest a smaller base width, somewhere around 900-1000.

[neit]

Your are also using the postion left: 1060px;
to set your right hand column from left, I would recommend you use float right to do this.

Also the dimensions you have set the left right and main content areas is greater than 100% so wider than the screen.

left: 12.6%
right: 17.1%
templatemo_content_wrapper: 73%