HTML Forum

**manuleka** · 07-10-2007, 08:35 AM

just wondering if anyone can tell me how to make the div size (height in my case) be dependent on the size and amount of children divs it has....

for the case of my codes below, the div id="menumain" overlaps over the borders of it's parent div id="contents"

check the result on http://www.nutstuff.net

css:

Code:

<html>
	<head>
		<meta http-equiv="page-enter" content="progid:dximagetransform.microsoft.pixelate(duration=3)" />
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<meta name="author" content="nutstuff.net" />
		<meta name="keywords" content="web design, web development, simple it solutions" />
		<meta name="description" content="simple web and it solutions" />
		<title>NutStuff - Home</title>
		<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;
				height:auto;
				border:1px solid #c0c0c0;
				border-top:25px solid #c0c0c0;
				color:#000;
				font-family:tahoma;
				font-size:11px;
				font-weight:bold;
				}
			div#contents div#menumain{
				position:absolute;
				top:0px;
				left:540px;
				width:180px;
				height:250px;
				margin-top:10px;
				border:1px solid #c0c0c0;
				background-color:#e0e0e0;
		</style>

html:

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\n\t\t\t</span>";
				?>
					<br /><br />
				<span style="text-align:center;">
						<a href="http://validator.w3.org/check?uri=referer">
						<img src="imgs/validxhtml1.0.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" />
						</a>
				</span>
			<div id="menumain">
				BROWSING LINKS GO HERE
			</div>
		</div>

**angele803** · 07-10-2007, 12:20 PM

Im not sure if this is the correct way to handle this problem, but I tested it out and it works. If you declare a min-height for your container div, it seems to solve the problem. You can just add min-height:100% to #contents.
Also, I dont think you need to put "div" in front of the divs you declare. You have "div#contents", but you should be able to just put "#contents".
It also looks like you are trying to center everything with absolute positioning. It might be easier for you to just put everything in a container div and put "margin: auto" on it.

**LadynRed** · 07-10-2007, 02:23 PM

Quote:

just wondering if anyone can tell me how to make the div size (height in my case) be dependent on the size and amount of children divs it has....

There's really nothing to it.. a div will automatically stretch to contain it's children. If the container is floated, then you must make sure the float is cleared.

Min-height is not supported by IE 6, so min-height will only work in other browsers. To make IE work you would have to have a separate CSS file for IE 6 and below and feed it just height: 100%. You'd need to use conditional comments to call the IE only CSS file.

Your problem is the position:absolute. Since absolute positioning takes those elements OUT of the document flow, regardless of how big they are, they will NOT affect any other element around them.

Get rid of the position:absolute and you should solve you problem. You may have to use floats instead to achieve your layout - which is a better solution anyway.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!