Resize website content based on user's monitor resolution

I am a fledgling web designer and have created some content for my workplace. However, what looks good on my monitor at 1280x1024 obviously does not look good at 800x600, 1024x768, etc. for other users who visit the website in a lesser resolution. I know there must be a way to do this and I'm trying to learn here, so be gentle. Do I have to create multiple resolutions of the same content and use something to resize based on user resolution? Or, is this able to be done with CSS and other trickery? Oh, and I use Dreamweaver CS4 for design. Thanks a lot guys!
LVL 9
DarksquireAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
Hi Darksquire,

>> Do I have to create multiple resolutions of the same content

You can, although this becomes a tremendous pain in the ass to maintain (essentially you are handling three sites for the price of one).

>> use something to resize based on user resolution?

You can attempt to detect the user's browser viewport size via javascript and then do something to change the pages as a result.  But this a) is very complicated and b) doesn't always work as it is highly browser dependent.

>>Or, is this able to be done with CSS and other trickery?

No trickery.  What you are talking about is called a "fluid" or "liquid" layout where the main container elements can stretch to fill a defined space because they are defined in percentages.  This is by far your best and simplest option.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
According to http://marketshare.hitslink.com/report.aspx?qprid=17, 800x600 usage is down below 3%.  Most common is 1024x768 at 25%... but 50% use Higher resolutions.  I design for 1024x768 now while figuring that I'll have to move to larger size before too long.  You might have noticed that many websites only use the center part of the screen.
0
Jason C. LevineNo oneCommented:
>> You might have noticed that many websites only use the center part of the screen.

Yeah, but that's not exactly what they are doing.  Many websites set the overall content container to be 85-95% of 1024 pixels (870 - 970 pixels) and then shoehorn the rest of the content from there.  The "center of the page" is just a design decision to use margin: auto on that container.  You could just as easily have it stay to the left or flush it to the right.

Personally, I am not a big fan of using a declared, fixed maximum width for the container.  As DaveBaldwin says, most users are running higher then 1024 x 768 but a quarter of them are still down there.  A 900px site looks really, really small when seen on 1200+ width resolutions and almost everyone is running a widescreen monitor unless they are on a mobile device or netbook.  I tend to declare simple percentage widths and use the min-width and max-width properties intelligently to prevent under and over-stretch.  It takes some mental gymnastics to get everything to play together but it can be done.
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Tom BeckCommented:
My 2 cents.
I prefer to design to the center of the screen as well. I usually make the content no wider than 900 pixels and keep the most important stuff to the left. In the past, I have tried stretching portions by percentages as jason1178 suggests, but with many people today using 16:9 format screens the content would then have the potential to stretch to absurd distortions. That makes the sites look bad. I think the days of streching the content to fill the screen are gone. There are too many variables. Better to have every visitor get the content in the same, controlled way.
0
Jason C. LevineNo oneCommented:
>> but with many people today using 16:9 format screens the content would then have the potential to stretch to
>> absurd distortions.

That's where max-width is your friend or you use percent for the overall container, fixed for the left/right columns, and percent for the main content.
0
Tom BeckCommented:
jason1178,
I concede that there may be situations where stretching might be desirable, like when informational content is of secondary concern to a flashy presentation. However, if the site is about displaying information, it should be presented in a recognizable format, i.e. like a document. When you open a document in a word processor, you don't want it stretched to a max-width based on the screen size. You want it presented in the format the author intended. Just because you can, doesn't mean you should. Car designers too went through a period where they felt compelled to add huge tail fins and massive amounts of chrome. Lucky for us, they got over it.
To stretch or not to stretch... it depends on the nature of the website.
0
Jason C. LevineNo oneCommented:
I think you may have missed my point a bit.  Consider the following page as an illustration.  I use percents in the #container to allow for a flexible design but the max-width provides the upper level constraint so it doesn't look silly on very high-resolution screens.  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}

.thrColHybHdr #container { 
	width: 80%;
	background: #FFFFFF;
	margin: 0 auto; 
	text-align: left;
	max-width: 1200px;
}  
.thrColHybHdr #header { 
	background: #DDDDDD; 
	padding: 0 10px;  
} 
.thrColHybHdr #header h1 {
	margin: 0; 
	padding: 10px 0; 
}

.thrColHybHdr #sidebar1 {
	float: left;
	width: 200px;
	background: #EBEBEB;
	padding: 15px 0;
	font: 11px;
}
.thrColHybHdr #sidebar2 {
	float: right;
	width: 200px;
	background: #EBEBEB;
	padding: 15px 0;
	font: 11px;
}
.thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
	margin-left: 10px; 
	margin-right: 10px;
}

.thrColHybHdr #mainContent {
 	margin: 0 12em 0 12em; 
	padding: 0 2em 0 2em; 
} 
.thrColHybHdr #footer { 
	padding: 0 10px; 
	background:#DDDDDD;
} 
.thrColHybHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
}

/* Miscellaneous classes for reuse */
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColHybHdr">

<div id="container">
  <div id="header">
  <h1>Header</h1></div>
  <div id="sidebar1">
    <h3>sidebar1 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
  <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p></div>
  <div id="sidebar2">
    <h3>sidebar2 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar2 div. </p>
  <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. </p></div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. </p>
    <p>Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. </p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p></div><br class="clearfloat" />
  <div id="footer">
<p>Footer</p></div></div>
</body>
</html>

Open in new window

0
DarksquireAuthor Commented:
Fantastic! I will go try it out right now! count me among your followers. I have fought with this for months; I knew there had to be a way
0
Jason C. LevineNo oneCommented:
Thanks for the kind words.  

If you are using CS4, I suggest doing File | New from the menu bar.  You will get lots of one, two, and three column CSS layouts that require some minimal editing to be functional pages.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

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.