How to build a dynamic container box?

cesarcesar · September 22, 2008

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

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

F1Fan · September 22, 2008

You'll need to use JavaScript. Add an onresize event on your body tag that will run a JS function that will dynamically resize your element(s). In that function, you can detect the window width and height, and adjust accordingly.

cesarcesar · September 22, 2008

sorry to confuse you, but i dont want it to expand to full screen width/height. Im just looking to expand to the size of a div tag i place inside the box. maybe i was unclear. woops.

F1Fan · September 22, 2008

I didn't think you wanted it to be full screen. But, maybe I didn't understand.

I was thinking that you wanted it to either take up a certain percentage of the window, or take up all but x number of pixels of the window. Is that right? If not, please explain what you do want.

cesarcesar · September 22, 2008

I want to be able to replace the div with "Ma quande lingues coalesce" in it with any div and have the width (at least) and height expand accordingly. The top, bottom, left, right borders should expand (repeat image) as well. I'm not worried about IE6 compatibility as its soon to be DOa. Thanks.

F1Fan · September 22, 2008

OK, I'm not sure exactly what you're trying to do. You want to place text into a div and have it automatically sized? If you just have text, just remove all width and height tags and it should do it automatically.

cesarcesar · September 22, 2008

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.

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

F1Fan · September 22, 2008

I'm not cursing you, I'm just trying to understand what you want so I can help you.

I've gotten a lot of grief around here for pushing tables, but I don't care. I LOVE TABLES! I can do so much with them, and I don't understand why people are saying that you should stop using them. I say USE 'EM!

dropfaith · September 22, 2008

theres not much need for tables anymore really other then tabular data which is what they were created for anyways

divs and css can do anything

dropfaith · September 22, 2008

I dont really understand this issue tho from what i can see width:auto; height:auto; would work then set a min-width and height on it to control its size a bit more to avoid it being to small

theres not much need for tables anymore really other then tabular data which is what they were created for anyways

divs and css can do anything

cesarcesar · September 22, 2008

I'm not cursing you, I'm just trying to understand what you want so I can help you.

Didn't think you where.. just saying to everyone else who grumbled seeing tables...

I LOVE TABLES! I can do so much with them, and I don't understand why people are saying that you should stop using them. I say USE 'EM!

I feel ya. Though i try to avoid them to avoid the cursing!

cesarcesar · September 22, 2008

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*

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

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

cesarcesar · October 28, 2008

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.

cesarcesar · October 28, 2008

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

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

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

Sign In

How to build a dynamic container box?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information