How to build a dynamic container box?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • empiresolutions
    New Member
    • Apr 2006
    • 162
    #1

    How to build a dynamic container box?

    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
    Code:
    <html>
 <head>
  <title> new document </title>

<style type="text/css" title="">
#box_t_body {
	background-image:url('box_t_body.jpg');
	background-repeat: repeat-x;
	height:11px;
	float:left;
}

#box_b_body {
	background-image:url('box_b_body.jpg');
	background-repeat: repeat-x;
	height:11px;
	float:left;
}

#box_l_body {
	background-image:url('box_l_body.jpg');
	background-repeat: repeat-y;
	float:left;
}

#box_r_body {
	background-image:url('box_r_body.jpg');
	background-repeat: repeat-y;
	float:right;
	width:11px;
}

#box_tl_corner {
	background-image:url('box_tl_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
	float:left;
}

#box_tr_corner {
	background-image:url('box_tr_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
	float:right;
}

#box_bl_corner {
	background-image:url('box_bl_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
	float:left;
}

#box_br_corner {
	background-image:url('box_br_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
	float:right;
}

#box_body {
	background-color:#ffffff;
	float:left;
}

/*   .clear prevents divs from flaotin gout side a container div.   */
.clear{
height:0;
font-size:0;
line-height:0;
clear:both;
}

</style>

</head>

<body>

<?php
$width=600;
$height=600;
?>

<div id="box_t_body" style="width:<?= $width ?>px;"><div id="box_tl_corner" style=""></div><div id="box_tr_corner" style=""></div></div>
<br class="clear">

<div id="box_body" style="height:<?= $height ?>px;width:<?= $width ?>px;">

	<div id="box_l_body" style="height:<?= $height ?>px; padding-left:20px;">

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

	</div>

	<div id="box_r_body" style="height:<?= $height ?>px;"></div>

</div>
<br class="clear">

<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">

</body>
</html>
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      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.

        Comment

        • empiresolutions
          New Member
          • Apr 2006
          • 162
          #3
          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.

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>

<style type="text/css" title="">
#box_t_body {
	background-image:url('box_t_body.jpg');
	background-repeat: repeat-x;
	height:11px;
}

#box_b_body {
	background-image:url('box_b_body.jpg');
	background-repeat: repeat-x;
	height:11px;
}

#box_l_body {
	background-image:url('box_l_body.jpg');
	background-repeat: repeat-y;
	width:11px;
}

#box_r_body {
	background-image:url('box_r_body.jpg');
	background-repeat: repeat-y;
	width:11px;
}

#box_tl_corner {
	background-image:url('box_tl_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
}

#box_tr_corner {
	background-image:url('box_tr_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
}

#box_bl_corner {
	background-image:url('box_bl_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
}

#box_br_corner {
	background-image:url('box_br_corner.jpg');
	background-repeat: no-repeat;
	height:11px;
	width:11px;
}

#box_body {
	background-color:#ffffff;
	padding:10px;
}

</style>

</head>

<body>

<table border=0 cellspacing=0 cellpadding=0>
	<tr>
		<td id="box_tl_corner"></td>
		<td id="box_t_body"></td>
		<td id="box_tr_corner"></td>
	</tr>
	<tr>
		<td id="box_l_body"></td>
		<td>
			<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>
		</td>
		<td id="box_r_body"></td>
	</tr>
	<tr>
		<td id="box_bl_corner"></td>
		<td id="box_b_body"></td>
		<td id="box_br_corner"></td>
	</tr>
</table>

</body>
</html>

            Comment

            • empiresolutions
              New Member
              • Apr 2006
              • 162
              #4
              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*
              Code:
              <!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>

	<style type="text/css" title="">

		#box_tl_corner {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_tl_corner.jpg');
			background-repeat: no-repeat;
			height:11px;
			width:11px;
			position:absolute;
			z-index:5;
			top:0px;
			left:0px;
		}

		#box_t_body {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_t_body.jpg');
			background-repeat: repeat-x;
			height:11px;
			position:relative;
		}

		#box_tr_corner {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_tr_corner.jpg');
			background-repeat: no-repeat;
			height:11px;
			width:11px;
			position:absolute;
			z-index:5;
			top:0px;
			right:0px;
		}

		#box_body {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_l_body.jpg');
			background-repeat: repeat-y;
			padding-left:15px;
		}

		#box_r_body {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_r_body.jpg');
			background-repeat: repeat-y;
			background-position:right;
			padding-right:15px;
		}

		#box_bl_corner {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_bl_corner.jpg');
			background-repeat: no-repeat;
			height:11px;
			width:11px;
			position:absolute;
			z-index:5;
			top:0px;
			left:0px;
		}

		#box_b_body {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_b_body.jpg');
			background-repeat: repeat-x;
			height:11px;
			position:relative;
		}

		#box_br_corner {
			background-image:url('http://sb.cesarvillaca.com/demo/box/box_br_corner.jpg');
			background-repeat: no-repeat;
			height:11px;
			width:11px;
			position:absolute;
			z-index:5;
			top:0px;
			right:0px;
		}

	</style>

</head>

<body>

	<div style="width:500px;">

		<div id="box_t_body"><div id="box_tl_corner"></div><div id="box_tr_corner"></div></div>

		<div id="box_body">

			<div id="box_r_body">

				<div id="" class="">

				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>

			</div>

		</div>

		<div id="box_b_body"><div id="box_bl_corner"></div><div id="box_br_corner"></div></div>

	</div>


</body>
</html>
              Second Example - thanks to *SJL*
              Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> new document </title>
<style type="text/css">
<!--
.box {
	border:#A85742 1px solid;
	background-color:#D6C768;
	padding:10px;
}
.boxed {
	background-color:#FFFFFF;
	padding:10px;
}
-->
</style></head>

<body>
<div class="box" style="width:500px;">
  <div class="boxed">

	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>
</div>
</body>
</html>

                Comment

                • empiresolutions
                  New Member
                  • Apr 2006
                  • 162
                  #5
                  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.cesarvillac a.com/temp/temp1.php

                  The source will tell you everything I'm working with. Thank you for the help.

                    Comment

                    • empiresolutions
                      New Member
                      • Apr 2006
                      • 162
                      #6
                      Solution: Adding *overflow: hidden;* to my #boxed class did the job.

                      Code:
                      #box {
	border:#A85742 1px solid;
	background-color:#D6C768;
	padding:10px;
}

#boxed {
	background-color:#FFFFFF;
	padding:10px;
	overflow: hidden;
}

                        Comment

                        Previous template Next
                        Working...