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> Code (markup):
You're thinking in table terms. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" /> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="text editor" content="Emacs 22" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ #container { border: 1px solid #f66; background-color: #fc6; color: black; padding: 10px; width: 35em; } #content { background-color: white; color: black; padding: 5px; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="content"> <p>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.</p> </div> </div> </body> </html> Code (markup): cheers, gary
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> Code (markup):
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> Code (markup): 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> Code (markup):
Did you not even look at the fix I gave you? If you're not going to read the responses, why bother to post? gary
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.
You are not using the best of css markup to be fair, you've got styling specified in both inline and within the tags themselves, why don't you use : <div id="boxed"> <p class="float">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<p> <p class="float">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci taton ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<p> <br class="clear"> </div>
yes the markup may not be perfect, but it works. Maybe help, instead of showing my faults that have nothing to do with my question.
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; } Code (markup):
Fair enough, I didn't mean my comment as a criticism, I had to cut short the post because I was going to work but I was trying to debug your problem, but im glad your are sorted.