By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,934 Members | 1,352 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,934 IT Pros & Developers. It's quick & easy.

How to build a dynamic container box?

100+
P: 162
I'm trying to build a box that i can place content in. This box should dynamically change width and height to accommodate the content inside. I have build out a non-working example here http://sb.cesarvillaca.com/demo/box/box.php. It looks like i want it to be, but it doesn't work dynamically. Can someone please help me get this working, or show me an example i can work from online? Thanks.

Here is my html with php for height/width (non-dynamic) values
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  <head>
  3.   <title> new document </title>
  4.  
  5. <style type="text/css" title="">
  6. #box_t_body {
  7.     background-image:url('box_t_body.jpg');
  8.     background-repeat: repeat-x;
  9.     height:11px;
  10.     float:left;
  11. }
  12.  
  13. #box_b_body {
  14.     background-image:url('box_b_body.jpg');
  15.     background-repeat: repeat-x;
  16.     height:11px;
  17.     float:left;
  18. }
  19.  
  20. #box_l_body {
  21.     background-image:url('box_l_body.jpg');
  22.     background-repeat: repeat-y;
  23.     float:left;
  24. }
  25.  
  26. #box_r_body {
  27.     background-image:url('box_r_body.jpg');
  28.     background-repeat: repeat-y;
  29.     float:right;
  30.     width:11px;
  31. }
  32.  
  33. #box_tl_corner {
  34.     background-image:url('box_tl_corner.jpg');
  35.     background-repeat: no-repeat;
  36.     height:11px;
  37.     width:11px;
  38.     float:left;
  39. }
  40.  
  41. #box_tr_corner {
  42.     background-image:url('box_tr_corner.jpg');
  43.     background-repeat: no-repeat;
  44.     height:11px;
  45.     width:11px;
  46.     float:right;
  47. }
  48.  
  49. #box_bl_corner {
  50.     background-image:url('box_bl_corner.jpg');
  51.     background-repeat: no-repeat;
  52.     height:11px;
  53.     width:11px;
  54.     float:left;
  55. }
  56.  
  57. #box_br_corner {
  58.     background-image:url('box_br_corner.jpg');
  59.     background-repeat: no-repeat;
  60.     height:11px;
  61.     width:11px;
  62.     float:right;
  63. }
  64.  
  65. #box_body {
  66.     background-color:#ffffff;
  67.     float:left;
  68. }
  69.  
  70. /*   .clear prevents divs from flaotin gout side a container div.   */
  71. .clear{
  72. height:0;
  73. font-size:0;
  74. line-height:0;
  75. clear:both;
  76. }
  77.  
  78. </style>
  79.  
  80. </head>
  81.  
  82. <body>
  83.  
  84. <?php
  85. $width=600;
  86. $height=600;
  87. ?>
  88.  
  89. <div id="box_t_body" style="width:<?= $width ?>px;"><div id="box_tl_corner" style=""></div><div id="box_tr_corner" style=""></div></div>
  90. <br class="clear">
  91.  
  92. <div id="box_body" style="height:<?= $height ?>px;width:<?= $width ?>px;">
  93.  
  94.     <div id="box_l_body" style="height:<?= $height ?>px; padding-left:20px;">
  95.  
  96.         <div id="" class="" style="width:550px;">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
  97.  
  98.     </div>
  99.  
  100.     <div id="box_r_body" style="height:<?= $height ?>px;"></div>
  101.  
  102. </div>
  103. <br class="clear">
  104.  
  105. <div id="box_b_body" style="width:<?= $width ?>px;"><div id="box_bl_corner" style=""></div><div id="box_br_corner" style=""></div></div><br class="clear">
  106.  
  107. </body>
  108. </html>
Sep 22 '08 #1
Share this Question
Share on Google+
5 Replies


Expert 100+
P: 397
I think you'll need a programming language to make it change width and height dynamically. You could use CSS to set min/max height and width. Min-height will prevent your current set-up from shooting the text out the bottom of the container for those among us who stress test sites. Neither min/max height or width is supported in IE/6-- you'll need to use "IE expressions" or a javascript work around if you need to support that browser.

Either-way, you'll want to use a strict doctype (and validate to it) and proper character encoding if your intent is to have it work reliably and consistently cross-browser.
Sep 22 '08 #2

100+
P: 162
ok ok curse me as you will, but until i can find a CSS solution I have reverted back to tables.... ahh i said it. here's my code. File is here, http://sb.cesarvillaca.com/demo/box/box2.php.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> new document </title>
  5.  
  6. <style type="text/css" title="">
  7. #box_t_body {
  8.     background-image:url('box_t_body.jpg');
  9.     background-repeat: repeat-x;
  10.     height:11px;
  11. }
  12.  
  13. #box_b_body {
  14.     background-image:url('box_b_body.jpg');
  15.     background-repeat: repeat-x;
  16.     height:11px;
  17. }
  18.  
  19. #box_l_body {
  20.     background-image:url('box_l_body.jpg');
  21.     background-repeat: repeat-y;
  22.     width:11px;
  23. }
  24.  
  25. #box_r_body {
  26.     background-image:url('box_r_body.jpg');
  27.     background-repeat: repeat-y;
  28.     width:11px;
  29. }
  30.  
  31. #box_tl_corner {
  32.     background-image:url('box_tl_corner.jpg');
  33.     background-repeat: no-repeat;
  34.     height:11px;
  35.     width:11px;
  36. }
  37.  
  38. #box_tr_corner {
  39.     background-image:url('box_tr_corner.jpg');
  40.     background-repeat: no-repeat;
  41.     height:11px;
  42.     width:11px;
  43. }
  44.  
  45. #box_bl_corner {
  46.     background-image:url('box_bl_corner.jpg');
  47.     background-repeat: no-repeat;
  48.     height:11px;
  49.     width:11px;
  50. }
  51.  
  52. #box_br_corner {
  53.     background-image:url('box_br_corner.jpg');
  54.     background-repeat: no-repeat;
  55.     height:11px;
  56.     width:11px;
  57. }
  58.  
  59. #box_body {
  60.     background-color:#ffffff;
  61.     padding:10px;
  62. }
  63.  
  64. </style>
  65.  
  66. </head>
  67.  
  68. <body>
  69.  
  70. <table border=0 cellspacing=0 cellpadding=0>
  71.     <tr>
  72.         <td id="box_tl_corner"></td>
  73.         <td id="box_t_body"></td>
  74.         <td id="box_tr_corner"></td>
  75.     </tr>
  76.     <tr>
  77.         <td id="box_l_body"></td>
  78.         <td>
  79.             <div id="box_body" style="width:600px; height:200px;">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</div>
  80.         </td>
  81.         <td id="box_r_body"></td>
  82.     </tr>
  83.     <tr>
  84.         <td id="box_bl_corner"></td>
  85.         <td id="box_b_body"></td>
  86.         <td id="box_br_corner"></td>
  87.     </tr>
  88. </table>
  89.  
  90. </body>
  91. </html>
  92.  
Sep 22 '08 #3

100+
P: 162
SOLVED - Ok i have two alternates... better than table solution. The first is close to my example and works 100%. The second is a frikin no brainer and all who looked at my post should have picked it of right away. It makes me think i should have not skipped that on CSS class in college! Thanks much to all who spent time on this issue, your help is much appreciated.

First Example - thanks to *msuffern*
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8.     <title>untitled</title>
  9.  
  10.     <style type="text/css" title="">
  11.  
  12.         #box_tl_corner {
  13.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_tl_corner.jpg');
  14.             background-repeat: no-repeat;
  15.             height:11px;
  16.             width:11px;
  17.             position:absolute;
  18.             z-index:5;
  19.             top:0px;
  20.             left:0px;
  21.         }
  22.  
  23.         #box_t_body {
  24.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_t_body.jpg');
  25.             background-repeat: repeat-x;
  26.             height:11px;
  27.             position:relative;
  28.         }
  29.  
  30.         #box_tr_corner {
  31.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_tr_corner.jpg');
  32.             background-repeat: no-repeat;
  33.             height:11px;
  34.             width:11px;
  35.             position:absolute;
  36.             z-index:5;
  37.             top:0px;
  38.             right:0px;
  39.         }
  40.  
  41.         #box_body {
  42.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_l_body.jpg');
  43.             background-repeat: repeat-y;
  44.             padding-left:15px;
  45.         }
  46.  
  47.         #box_r_body {
  48.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_r_body.jpg');
  49.             background-repeat: repeat-y;
  50.             background-position:right;
  51.             padding-right:15px;
  52.         }
  53.  
  54.         #box_bl_corner {
  55.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_bl_corner.jpg');
  56.             background-repeat: no-repeat;
  57.             height:11px;
  58.             width:11px;
  59.             position:absolute;
  60.             z-index:5;
  61.             top:0px;
  62.             left:0px;
  63.         }
  64.  
  65.         #box_b_body {
  66.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_b_body.jpg');
  67.             background-repeat: repeat-x;
  68.             height:11px;
  69.             position:relative;
  70.         }
  71.  
  72.         #box_br_corner {
  73.             background-image:url('http://sb.cesarvillaca.com/demo/box/box_br_corner.jpg');
  74.             background-repeat: no-repeat;
  75.             height:11px;
  76.             width:11px;
  77.             position:absolute;
  78.             z-index:5;
  79.             top:0px;
  80.             right:0px;
  81.         }
  82.  
  83.     </style>
  84.  
  85. </head>
  86.  
  87. <body>
  88.  
  89.     <div style="width:500px;">
  90.  
  91.         <div id="box_t_body"><div id="box_tl_corner"></div><div id="box_tr_corner"></div></div>
  92.  
  93.         <div id="box_body">
  94.  
  95.             <div id="box_r_body">
  96.  
  97.                 <div id="" class="">
  98.  
  99.                 Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
  100.  
  101.                 </div>
  102.  
  103.             </div>
  104.  
  105.         </div>
  106.  
  107.         <div id="box_b_body"><div id="box_bl_corner"></div><div id="box_br_corner"></div></div>
  108.  
  109.     </div>
  110.  
  111.  
  112. </body>
  113. </html>
  114.  
Second Example - thanks to *SJL*
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title> new document </title>
  6. <style type="text/css">
  7. <!--
  8. .box {
  9.     border:#A85742 1px solid;
  10.     background-color:#D6C768;
  11.     padding:10px;
  12. }
  13. .boxed {
  14.     background-color:#FFFFFF;
  15.     padding:10px;
  16. }
  17. -->
  18. </style></head>
  19.  
  20. <body>
  21. <div class="box" style="width:500px;">
  22.   <div class="boxed">
  23.  
  24.     Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
  25.  
  26.   </div>
  27. </div>
  28. </body>
  29. </html>
  30.  
Sep 22 '08 #4

100+
P: 162
I'm running into an issue in IE7 with one of these box choices. When using a *float:left;* style it pulls the padding (color) from the top, down into the box. This is not how I want it to react. It does show correct in standards browsers.

See the example here, http://www.cesarvillaca.com/temp/temp1.php

The source will tell you everything I'm working with. Thank you for the help.
Oct 28 '08 #5

100+
P: 162
Solution: Adding *overflow: hidden;* to my #boxed class did the job.

Expand|Select|Wrap|Line Numbers
  1. #box {
  2.     border:#A85742 1px solid;
  3.     background-color:#D6C768;
  4.     padding:10px;
  5. }
  6.  
  7. #boxed {
  8.     background-color:#FFFFFF;
  9.     padding:10px;
  10.     overflow: hidden;
  11. }
  12.  
Oct 28 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.