Jump to content
skaterdav85

Having Trouble W/ Css When I Resize My Browser

Recommended Posts

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;}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...