Having Trouble W/ Css When I Resize My Browser

[skaterdav85]

this is the link http://www-scf.usc.edu/~dtang/hce2/index.phpIm concerned with both the masthead (where it says Health Care Engineering) and the div with the three images. When i resize the browser and keep making the width smaller, the divs that hold these images keeps getting smaller because i specified a margin-left and margin-right of 5%. The divs keep getting smaller even when i go past the images. Instead, I just want the div to stop getting smaller once it hits the image and then make the margins smallers and show less of my page as you continue to make the browser window width smaller.Similar to the effect on this page when you resize the browser:http://itp.usc.edu/Anyone know how to do this? here is my HTML code for my masthead:

<div id="masthead"><table border="0" cellspacing="0" cellpadding="0"><tr><td width="33%" valign="top">	<table width="100%" border="0" cellspacing="0" cellpadding="0">		  <tr>			<td><a href="http://www.usc.edu" target="_blank"><img src="usc_name_black.gif" alt="USC" width="315" height="25" border="0" /></a></td>		  </tr>		  <tr>			<td><a href="http://healthcareengineering.usc.edu/"><img src="title.jpg" alt="USC" width="475" height="50" border="0" /></a></td>		  </tr>	</table></td><td width="33%" align="right"><table width="70%" border="0" cellspacing="0" cellpadding="0">  <tr>	<td align="right"><a href="http://www.usc.edu" target="_blank"><img src="mono-white-cardinal-big.gif" alt="USC" width="94" height="75" border="0" /></a></td>  </tr></table></td></tr></table></div>

and here is my CSS for the masthead:

#masthead {margin-left:5%;margin-right:5%;padding: 0px;border:1px solid #000;background-color:#990000;}

[jlhaslip]

You need to give something a fixed width in order to stop the squashing effect.It could be the #content area, perhaps? Try around 950px for that. There will be other complications, like centring, but that can be worked on.

[skaterdav85]

You need to give something a fixed width in order to stop the squashing effect.It could be the #content area, perhaps? Try around 950px for that. There will be other complications, like centring, but that can be worked on.

oh ok i see. When a person has a browser window opened to the fullest, whats the width usually? I noticed alot of websites make there centered div around 900 pixels.

[Tykain]

It depends in what resolution your screen is. I believe the most common one nowadays is 1024x768.There will be an horizontal scrollbar in 800x600 with a 950px fixed size btw.

[Synook]

960 is the most popular fixed-width website width currently, because it fits on a 1024px-width browser with chrome, and it has many factors.

[htmlcoder]

i get a '404' error...! then I cannot view it!