CSS Forum

**empiresolutions** · 09-22-2008, 09:04 AM

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>

**wayfarer07** · 09-22-2008, 10:07 AM

The easiest way is to make the box absolutely positioned, then don't set a width or a height on it. Absolutely positioned divs without height and width attributes will adjust automatically to fit their content. You could, alternatively, set a max-width characteristic, though this won't work in IE6, and may cause some browser compatibility issues.

If you want to center the box, however, you will need to calculate the widths with JavaScript, using the offsetWidth property. You may have to do a little research for this, because calculating the width is not always accurate on absolutely positioned items, at least not in IE.

Reading your post again, I'm not totally sure what you mean by "dynamic". The reason this is confusing to me is that simply stating that you want the box to change with the content isn't a very accurate description. There are many ways a box could stretch to accommodate text. The example I gave will never end up looking like the example you linked to, since it would first stretch to fill the browser horizontally before it ever expanded vertically.

Does this help?

**empiresolutions** · 09-22-2008, 03:44 PM

i want the box to expand width or height according to the content. my problem is the border images all seems to want a height. this is really troubling me as it seems so simple. I think i've been staring at the screen too long today!

**empiresolutions** · 09-22-2008, 04:34 PM

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>

**wayfarer07** · 09-22-2008, 05:27 PM

You don't need border images to make the box you displayed. All you need is a <div> nested inside of another <div>, with the outer one having a single-pixel orange border, a yellow background, and appropriate padding. Be sure to set a white background on the inner <div> so that its color overrides the yellow.

**empiresolutions** · 09-22-2008, 06:00 PM

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>

**itsnetservices** · 09-23-2008, 02:17 PM

Not to promote my own site or anything, but on my blog I built 20 different content boxes that all resize horizontally and vertically.

You can download any or all of them for free here:
http://infectthesystem.com/2008/20-free-css-containers/

If there aren't exactly what you were looking for, you could always just take my code and covert it to what you need, no credit required.

**empiresolutions** · 10-28-2008, 08:06 AM

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.

**empiresolutions** · 10-28-2008, 09:20 AM

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