div sizing
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">
<img src="http://www.w3.org/Icons/valid-xhtml10" 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
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">
<img src="http://www.w3.org/Icons/valid-xhtml10" 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
0
Comments
i fixed it for you