Website design that dynamically fits page within destination browser

How can a website be designed so that pages automatically fit within the destination browser? Is it possible to programmatically detect the browser and screen resolution so that a page fits perfectly within a browser?
Who is Participating?
NickVdConnect With a Mentor Commented:
Yes it is progammatically possible to detect sizes and whatnot, but it's not needed.

Simply design with percents and em's using css and you'll be fine. need a main container that is 90% and centered? with a minimum width of 770 and a maximum of 1000

<div id="maincontent">
lorem ipsum

#maincontent {
  width: 90%;
  min-width: 770px;
  margin:0 auto; /*center*/
  border:1px solid red;

The div will always take up either a minimum of 770, a maximum of 1000 or 90% of the width of the client window depending on how you set the rules up, you can make a site look perfect in almost any resolution.
timonlineAuthor Commented:
NickVd, Thanks alot...
I am bit hazy on a couple of things, firstly what are "em's"?, secondly, what is "lorem ipsum" within the div tag?

With an existing site that has fixed width div tags, if I create a container (like in your example) and then make all existing div tags subordinate to this container, will the content in the existing div tags resize in the client browser according to the rules in the new container?
ahoffmannConnect With a Mentor Commented:
> with a minimum width of 770 and a maximum of 1000
and soon you break the rules :-/

Just use relative sizes in em or ex mainly, px just for borders. That's all and works since the beginning back in '93
timonlineAuthor Commented:
ahoffmann, thanks...
forgive my ignorance, but could you tell me what "em" and "ex" refers to?
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.