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