CSS Forum

**seannarae** · 03-19-2008, 05:03 PM

I feel the solution to this lies in CSS. However, if the solution is in the show/hide js i am using, please feel free to bounce me over to that forum.

I have a bounding container div w/o a specified height. That is, height should be dynamic based on contents within.

Within there, i have divs that i show/hide via js (dw cs3).

My goal is to have the (lower) height of the container div expand & contract as i show/hide the divs within.

Here a link to the test page:
http://www.seanna.com/test.html

Any suggestions?

THE CSS

Code:

<style type="text/css">
<!--
body {
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
body span {
    color: #006699;
    font-size: 12px;
}

.bounding {
    margin: 20px;
    width: 250px;
    border: 1px solid #000000;
    background-color:#FFFFCC;
}
.div1 {
    width: 200px;
    height: 100px;
    border: 2px solid #CC0000;
}
.div2{
    width: 200px;
    height: 100px;
    margin-top: -104px;
    border: 2px solid #CC0000;
}
.div3 {
    width: 200px;
    height: 100px;
    margin-top: -104px;
    border: 2px solid #CC0000;
}
-->
</style>

THE JAVASCRIPT

Code:

<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>

THE HTML

Code:

<body onload="MM_showHideLayers('one','','hide','two','','hide','three','','hide')">

<div class="bounding">
<span>
This is the bounding container.<p>I'd like its native height to be that of the contents onLoad.<p>Then, upon show/hide of DIVs within (via js/onClick), i'd like the height of the bounding container to expand/contract </span>
<p>
 
    <a href="#" onclick="MM_showHideLayers('one','','show','two','','hide','three','','hide')">SHOW #1 (hide 2,3)</a><br />
    <a href="#" onclick="MM_showHideLayers('one','','hide','two','','show','three','','hide')">SHOW #2 (hide 1,3)</a><br />
    <a href="#" onclick="MM_showHideLayers('one','','hide','two','','hide','three','','show')">SHOW #3 (hide 1,2)</a><br />
<p>

    <div class="div1" id="one">THIS IS NUMBER ONE<br /><a href="#" onclick="MM_showHideLayers('one','','hide','two','','hide','three','','hide')">close</a></div>
    <div class="div2" id="two">THIS IS NUMBER TWO<br /><a href="#" onclick="MM_showHideLayers('one','','hide','two','','hide','three','','hide')">close</a></div>
    <div class="div3" id="three">THIS IS NUMBER THREE<br /><a href="#" onclick="MM_showHideLayers('one','','hide','two','','hide','three','','hide')">close</a></div>
</div>

</body>

**LadynRed** · 03-19-2008, 05:17 PM

Quote:

That is, height should be dynamic based on contents within.

That IS the default behavior of a div unless a defined height is specified.

Why are you hiding content anyway ?

**seannarae** · 03-19-2008, 05:30 PM

first, i'm hiding content until the user clicks to reveal it. specifically, a block for HELP, another for TERMS, and a 3rd for FAQs. onLoad, i'm wanting to have those blocks hidden.

second, i cant specify a height because different states of the page later on will effect height. for example, when an error message is displayed at top of page, it will push-down other elements.

perhaps there's a better way to acheive this? such as different js? where the divs could be display:none; and the js then does show/hide?

**womble** · 03-19-2008, 06:19 PM

if you replace you css method of hiding the boxes from ...
visibility:hidden and visibility:visible
to...
display:none and display:block;

display none makes it seem that the box isn't there at all - as though the element wasn't rendered - whereas visibility just makes it see-through - like the invisible man - he's still there - you can still bump into him

hope that makes sense - i's late

**ADAM Web Design** · 03-19-2008, 08:01 PM

Seannarae, is this the effect you're going for?

http://65.163.13.233/highland

Hover over the "About Us" menu.

If it is, feel free to lift that page.