Maintain Site Display Size Despite Size of Monitor

I'm trying to make it so my site displays the same size on different monitors. For example, on my computer the website appears how I want it, but on others it may appear larger than life itself. I realize that it will vary in different browsers and on different monitor sizes but I wonder if there is a way around this problem. I would like to hear a great suggestion on how to fix this problem - no matter how elementary it is. Please describe the process in detail or provide a link to a possible solution. Thanks.
AllHaleAsked:
Who is Participating?
 
Jason C. LevineConnect With a Mentor No oneCommented:
There are TONS of tutorials on CSS design.  Just google around until you find one you like.   It's not that CSS yields better results for what you are asking here, but it can do more than table-based design can.  Using tables to layout the site is fast becoming a no-no in web design so it is worth looking into CSS.

For this specific thing, all you would need to do is wrap all of the content of the page in a div or a one-cell, one-column table and set the width of that container to whatever % of the screen size you prefer and then make all other elements inside of that container % relative to the container.  The exception would be navigation bars (those should be defined as static widths).

So instead of defining a 760 pixel width with a 100 left and a 660 pixel right column, you would define a 80% container with a 100 pixel left box and let the right box take up the rest of the space.  As we are getting to specific code, I will leave off here unless you have more specific questions.
0
 
Jason C. LevineNo oneCommented:
Hi AllHale,
 
I'm not sure I understand what you want.  Do you want the site to take up the same percentage of the screen no matter the monitor size or do you want the site to have the same width no matter the monitor size?

In either case, this is easy to do with a pure CSS design or a table-based design.  The former uses a CSS or table container set to percentage width and the latter uses a CSS or table container set to fixed pixel width.

Here's a couple of examples:

Percentage width: http://www.oswd.org/design/preview/id/2828

Fixed width: http://www.oswd.org/design/preview/id/2485
0
 
AllHaleAuthor Commented:
I definitely want to take up the same percentage of the screen despite a change in monitor size. Is there a tutorial on creating the site in CSS design, I shy away from CSS now, but if it yields better results maybe I should throw myself into it.
0
 
AllHaleAuthor Commented:
No that's good enough for now. I'll try to do what you suggested and see if it solves my problem. Thanks again Jason, you're the best.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.