Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamic size for box 1

Status
Not open for further replies.

technoknow

Technical User
Apr 19, 2002
121
0
0
US
I'm working on a website that was designed with a box that has a width of 360px and a height of 310px. The content that will fill the box is static html but will be different for each page. Some of the pages will require that the height of the box expand for the content, the width will remain the same.
What would be the best way to go about doing this? The rest of the site is images that are aligned around the box and should remain unchanged. Would appreciate any ideas.
Thanks,
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.
 
I think I may have a solution for you.
<script language="JavaScript" type="text/javascript">
<!--

function frm_onload(frmname)
{
frmname.frameElement.height = frmname.document.body.scrollHeight+25;
}

//-->
</script>

And then place this in the box that you want to expand:
onload="return frm_onload(boxname)"
This will make the box extend vertically, however you could easily edit it to make the box extend horizontally aswell.
 
There's a CSS property for that called min-height. It basically means the box will not be smaller than that size, but if it needs be (more content) it will expand beyond that. The problem with this is, that IE somehow decided it will not support this. Luckily, in their infinite wisdom, IE programmers made height attribute behave like min-height in their browser. So that is how you can do it. I will assume your box has an id="main" so change that accordingly in your real code:
Code:
<style type="text/css">
  #main {
    width: 360px;
    min-height: 310px;
  }

  /* hack for IE */
  * html #main {
    height: 310px;
  }
This should work nicely.
 
Thanks for your replies. I've tried the css solution and it works great. All of the other images are moving too when the box expands but I'm sure that is something I can fix.
Thanks Vragabond.
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top