Dysan Posted February 15, 2008 Share Posted 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; } Quote Link to comment https://forums.phpfreaks.com/topic/91277-resize-container-div/ Share on other sites More sharing options...
bronzemonkey Posted February 15, 2008 Share Posted 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; } Quote Link to comment https://forums.phpfreaks.com/topic/91277-resize-container-div/#findComment-467944 Share on other sites More sharing options...
dbrimlow Posted February 15, 2008 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/91277-resize-container-div/#findComment-468075 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.