Any way for internal div to adjust parent bounding box?

**terov** · 04-06-2004 01:03 AM

I'm trying to find out if there's a way to have a div within a div--the child relatively positioned or otherwise--change the parent's bounding box.

I've got a menu-submenu setup, where the submenu (teal) is a nested list, and consequently inside the main menu's (blue) list. The thing is, the main content div (violet) is right beneath it, and I want it to move down depending on whether or not there is a submenu present, or dependent on the size of the submenu div.

Check out the code (pasted here, and in the zip file if you want to see how it looks) and tell me what you think. There's no real way to do what I'm trying to do by using the "clear" attribute, unfortunately.

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Structure Test.</title>
	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<meta http-equiv="MSThemeCompatible" content="Yes" />
	<link rel="stylesheet" href="struc.css" type="text/css" />
	<style type="text/css">
	<!--
	@import url(struc.css);
	-->
	</style>
</head>
<body>
<div id="container">
	<div id="identity"></div>
	<div id="menu">
		<div id="submenu"></div>
	</div>
	<div id="main"></div>
	<div id="news"></div>
	<div id="footer"></div>
</div>
</body>
</html>

CSS:

Code:

body {margin:0px;}
#container {width:600px;
	position:absolute;
	top:0px; left:0px;
	background-color: black}
#identity {width:100px; height:200px;
	float:left;
	background-color: red}
#menu {width:400px; height:75px;
	float:right;
	position:relative;
	top:20px;
	background-color: blue}
#submenu {width:300px; height:50px;
	float:right;
	position:relative;
	top:80px;
	background-color: #aaffbb}
#main {width:450px; height:300px;
	float:right;
	position:relative;
	top:30px;
	background-color: #aa3399}
#news {width:80px; height:60px;
	position:relative;
	float:left; clear:left;
	top:40px;
	background-color: gray;}
#footer {width:300px; height:50px;
	float:right; clear:both;
	background-color: green; }

Thanks you guys!

**Sam** · 04-06-2004 01:49 AM

you didn't attach a zip file, but perhaps this will help.
I can't really see what you're going for through your example, but it seems like a run-of-the-mill dropdown, in which case Vladdy's will work perfectly. Perhaps once you attach your zip your goal will make more sense.

**terov** · 04-06-2004 01:58 AM

Ah. I guess it didn't upload because I made a rar file out of it.

Anyway. Now you can see what I mean, in color! Essentially, I just want the teal div (inside the blue div) to, because of its position and size, increase the overall size of the blue div, and consequently push the violet div down.

Maybe that makes sense.... I'll check out your link--thank you!

**Sam** · 04-06-2004 02:02 AM

perhaps this is just me, but I see no Teal... what is teal's hex code so I can find it in your source?

**terov** · 04-06-2004 02:04 AM

LOL.
It's not really a teal is it?

It's the light green one, the #aaffbb

**Sam** · 04-06-2004 02:06 AM

And that is supposed to be Inside the blue div, or below it?

**terov** · 04-06-2004 02:07 AM

Well, it's coded to be inside the blue div. It's relatively positioned inside it, and I want it to change the bounding box on the blue div, so that the violet one falls beneath it instead of acting like the blue div was the only one there.

**Sam** · 04-06-2004 02:18 AM

alright, I'm not entirely sure here, but I believe that so long as #menu's height is not explicitly defined, it will form to the height of its child.
EDIT:
just as a side note, you have far too complex CSS. I was able to simplify your sheet to this:

PHP Code:


body {margin:0px;}

#container{

width:600px;

background-color: black

}

#identity{

width:100px;

height:200px;

float:left;

background-color: red

}

#menu{

width:400px;

margin-left:200px;

background-color: blue

}

#submenu{

width:300px;

height:100px;

background-color: orange

}

#main{

width:450px;

height:300px;

margin-left:150px;

background-color: #aa3399

}

#news{

width:80px;

height:60px;

float:left;

clear:left;

background-color: gray;

}

#footer{

width:600px;

height:50px;

clear:both;

background-color: green;

}

and the only markup change required was to move the news div directly after the identity div

**terov** · 04-06-2004 02:43 AM

Yeah, the reason for the complexity is that I just sort of snagged the example from the even more complex (gasp!) layout code that I'm mucking around with right now

I think you solved my problem though. Many thanks!

**Sam** · 04-06-2004 02:46 PM

glad to help

Thread: Any way for internal div to adjust parent bounding box?

Thread Tools

Display

Any way for internal div to adjust parent bounding box?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions