Resize Container Div

Dysan · February 15, 2008

Hi,

Upon resizing the browsers text size, in order to display larger text on the page, is it possible to also resize the containing div?

I have the following page, that displays the status of a shopping cart, upon resizing the browsers text, is it possible to also resize the width and height of the cartStatusOrange & cartStatusGreen div?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div id="container">
  <div id="cartStatusOrange">
    <div id="cartStatusGreen">
      <div id="cornerLeft"></div>
      <div id="cornerRight"></div>
      <div id="cartStatusBold">Shopping Cart: <span id="cartStatus">(0 items)</span></div>	
</div>
  </div>
</div>
</body>
</html>

*
{
  FONT-SIZE: 8pt;
  FONT-FAMILY: Tahoma;  
}

body
{
  MARGIN: 0px;
  PADDING: 0px;
  BACKGROUND: url(bg.bmp) no-repeat;
}

#container
{
  LEFT: 20px;
  WIDTH: 730px;
  HEIGHT: 453px;
  POSITION: absolute;
/*  BORDER: 1px solid rgb(0,0,0);*/
}

#cartStatusOrange
{
  WIDTH: 211px;
  HEIGHT: 39px;
/*  BACKGROUND: rgb(255,217,83);*/
}

#cartStatusGreen
{
  WIDTH: 211px;
  HEIGHT: 36px;
/*  BACKGROUND: rgb(187,210,1);*/
}

#cartStatusBold
{
  TOP: 13px;
  LEFT: 63px;
  POSITION: relative;
  COLOR: rgb(0,0,0);
  FONT-WEIGHT: bold;
}

#cartStatus
{
  FONT-WEIGHT: normal;
}

#cornerLeft
{
  TOP: 14px;
  WIDTH: 9px;
  HEIGHT: 12px;
  POSITION: relative;
  BACKGROUND: url(cornerLeft.bmp) no-repeat;
  FLOAT: left;
}

#cornerRight
{
  TOP: 14px;
  WIDTH: 9px;
  HEIGHT: 12px;
  POSITION: relative;
  BACKGROUND: url(cornerRight.bmp) no-repeat;
  FLOAT: right;
}

bronzemonkey · February 15, 2008

Yes it is. Declare the element widths in terms of ems (a relative unit).

Try to avoid using the pt unit (it is for print media) and absolute units in general (pt & px) altogether for font-sizes in screen media stylesheet (to allow text resizing in IE):

/* this is just a very simple browser reset
   it is also declaring the font-size and family to be used */

html, body, div, p, blockquote, ul, ol, li, dl, dt, dd {
  padding: 0;
  border: 0;
  margin: 0;
  font-size: 0.625em; /*equivalent to ~10px in most browsers*/
  font-family: Tahoma;  
}

/* now you can declare the dimensions of the elements in terms of the font-size
   you'll notice that changing the font-size value above will alter the size of the elements styled below
   you could use ems for widths/heights/padding/borders/margins of almost every element in the document to get a fully scalable website */

#cartStatusOrange {
  width: 21.1em; /* 21.1 x 10px = 221px at default font-size */
  height: 3.9em; /* 3.9 x 10px = 39px at default font-size */
}

#cartStatusGreen {
  width: 21.1em;
  height: 3.6em;
}

dbrimlow · February 15, 2008

This is a good chart to start with for converting relative pixel sizing to percentage:

Global Font Sizes

--------------------------------------------------------
The following code is to help achieve scalable and consistant
font-sizes across major platforms. To set a font-size in the 
CSS, use one of the percentage values from the table below.

This code is courtosy of the fine folks at Yahoo, Code is 
licensed under the BSD License: http://developer.yahoo.net/yui/license.txt

--------------------------------------------------------

 77% = 10px	 85% = 11px	 92% = 12px	

100% = 13px	107% = 14px	114% = 15px 	

122% = 16px	129% = 17px	136% = 18px	

144% = 19px	152% = 20px	159% = 21px

167% = 22px	174% = 23px	182% = 24px

189% = 25px	197% = 26px

-------------------------------------------------------*/

It is not exactly accurate, but very close with respect to the relative values above the base that you set.

For example I set my body at 75% which seems to be closer to 12px to me. I then use either the same percent as above for all the rest, or convert them to ems - with 1em being equal to the body's 75%. I just tried it for the first time in a fixed width 2 column layout I have and it works like a charm.

Dan Cederhome's "Bulletproof Web Design recommends using the font size of small, smaller, large, larger - but I haven't actually tried his complete flex-layout technique yet.

Sign In

Resize Container Div

Recommended Posts

Dysan

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information