www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Oct 2003
    Location
    Logan, UT
    Posts
    27

    Any way for internal div to adjust parent bounding box?

    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!

  2. #2
    Join Date
    Aug 2003
    Posts
    1,576
    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.

  3. #3
    Join Date
    Oct 2003
    Location
    Logan, UT
    Posts
    27
    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!
    Attached Files Attached Files

  4. #4
    Join Date
    Aug 2003
    Posts
    1,576
    perhaps this is just me, but I see no Teal... what is teal's hex code so I can find it in your source?

  5. #5
    Join Date
    Oct 2003
    Location
    Logan, UT
    Posts
    27
    LOL.
    It's not really a teal is it?

    It's the light green one, the #aaffbb

  6. #6
    Join Date
    Aug 2003
    Posts
    1,576
    And that is supposed to be Inside the blue div, or below it?

  7. #7
    Join Date
    Oct 2003
    Location
    Logan, UT
    Posts
    27
    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.

  8. #8
    Join Date
    Aug 2003
    Posts
    1,576
    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-colorblack
    }
    #identity{
    width:100px;
    height:200px;
    float:left;
    background-colorred
    }
    #menu{
    width:400px;
    margin-left:200px;
    background-colorblue
    }
    #submenu{
    width:300px;
    height:100px;
    background-colororange
    }
    #main{
    width:450px;
    height:300px;
    margin-left:150px;
    background-color#aa3399
    }
    #news{
    width:80px;
    height:60px;
    float:left;
    clear:left;
    background-colorgray;
    }
    #footer{
    width:600px;
    height:50px;
    clear:both;
    background-colorgreen;

    and the only markup change required was to move the news div directly after the identity div
    Last edited by Sam; 04-06-2004 at 03:20 AM.

  9. #9
    Join Date
    Oct 2003
    Location
    Logan, UT
    Posts
    27
    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!

  10. #10
    Join Date
    Aug 2003
    Posts
    1,576
    glad to help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles