div sizing

edited July 2007 in Internet & Media
just wondering if anyone can tell me how to make a parent div's size (height specifically) dependent on the amount of stuff in its div children....

style:
<style type="text/css">
div{
position:absolute;
}
div#mainlogo{
/* MAIN LOGO */
top:0;
left:50%;
margin-left:-370px;
width:740px;
height:100px;
background-image:url('imgs/nutstuff.gif');
}
div#contents{
top:110px;
left:50%;
margin-left:-370px;
padding:10px;
width:719px;
border:1px solid #c0c0c0;
border-top:25px solid #c0c0c0;
color:#000;
font-family:tahoma;
font-size:11px;
font-weight:bold;
}
div#contents div#menumain{
top:0px;
left:540px;
width:180px;
height:250px;
margin-top:10px;
border:1px solid #c0c0c0;
background-color:#e0e0e0;
</style>

code:
<div id="mainlogo">
<img src="imgs/ad1.gif" alt="your closest to free web start!" />
</div>
<div id="contents">
Welcome to nutstuff.net, our site is under construction!<br />
Please visit again sometime soon<br /><br />
Nut Stuff crew<br /><br />
<?php
print "<span style=\"font-weight:normal;\">\n\t\t\t\tthis line is for testing htaccess script and php\n\t\t\t</span>";
?>
<br /><br />
<span style="text-align:center;">
<a href="http://validator.w3.org/check?uri=referer"&gt;
<img src="http://www.w3.org/Icons/valid-xhtml10&quot; alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" />
</a>
</span>
<div id="menumain">
BROWSING LINKS GO HERE
</div>
</div>

now div "menumain" runs over the bottom border of its parent div "contents"

check how it looks on http://www.nutstuff.net

Comments

  • primesuspectprimesuspect Beepin n' Boopin Detroit, MI Icrontian
    edited July 2007
    please be careful when pasting code into the post windows. Enclose your code with [ php ] tags.

    i fixed it for you :)
  • LincLinc Owner Detroit Icrontian
    edited July 2007
    i fixed it for you :)
    By "fixed" did you mean "deleted"? :p I don't see any code now...
  • BLuKnightBLuKnight Lehi, UT Icrontian
    edited July 2007
    Okay to do this you'll need to start out with *deleted* and then after that just tweak *deleted* in the second to last div.
Sign In or Register to comment.