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:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"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:
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!you didn't attach a zip file, but perhaps this (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/CSSNav.html">http://www.vladdy.net/Demos/CSSNav.html</a><!-- m -->) 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.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!perhaps this is just me, but I see no Teal... what is teal's hex code so I can find it in your source?LOL.
It's not really a teal is it?
It's the light green one, the #aaffbbAnd that is supposed to be Inside the blue div, or below it?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.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:
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 divYeah, 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!glad to help
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:
<!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=http://www.webdeveloper.com/forum/archive/index.php/"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:
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!you didn't attach a zip file, but perhaps this (<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/CSSNav.html">http://www.vladdy.net/Demos/CSSNav.html</a><!-- m -->) 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.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!perhaps this is just me, but I see no Teal... what is teal's hex code so I can find it in your source?LOL.
It's not really a teal is it?
It's the light green one, the #aaffbbAnd that is supposed to be Inside the blue div, or below it?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.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:
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 divYeah, 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!glad to help