Link to home
Start Free TrialLog in
Avatar of James Rodgers
James RodgersFlag for Canada

asked on

relatively positioned div not expanding container div

i ahve a nested div, the inner div is positioned at 400px inside a 558px parent div with a bg image, ona click event content is added to the child div but the parent div does not expand to accomodate teh div, cant seem to figure it out.

tia

Avatar of rbudj
rbudj
Flag of United States of America image

Please post code.  This cannot be troubleshooted without either code or a link to your page.
Avatar of James Rodgers

ASKER

cant post a link and this is the best i can do for code, css is complete, page code is complete-minus images and the js is just dummied up to prevent errors
the div with teh gold border(just for debugging) is the container div which has a bg image 960X558 teh child div is positioned at 400px from top and has a black border and no content, when clicking a button the content is added, actual page uses an ajax call to populate currently using test content and is simulated by the js in the code

when the content is added the black border div expands with the content but it overlaps the content blow the gold bordered div, i need it to push teh gold bordered div down to accomodate the new contetn...whech may b 5 lines or may be 100(not likely but you get the idea)

thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<title>The Voila Institute</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="-1">
	<meta name="TITLE" content="The Voila Institute">
	<meta name="DESCRIPTION" content="Voila ">
	<meta name="KEYWORDS" content="hair, styling, salon, education, spa, colouring, fashion">
	<meta name="OWNER" content="Voila Institute">
	<meta name="AUTHOR" content="Radii Web & Print Production">
	<meta name="RATING" content="General">
	<meta name="ROBOTS" content="index,follow">
 
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" language="javascript">
var str='<h3>About the School	</h3><img src="/images/sml_intranet.jpg" class="imgTabDesc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras condimentum rhoncus arcu. Aliquam massa tellus, cursus et, dignissim eget, auctor sit amet, libero.<br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><div class="clearBoth"></div>';
function getSource(sSource, eTarget){
	
    document.getElementById(eTarget).innerHTML=str;
 
}
 
function setImage(lstParentID, objOn){
	var y=1;
	var iStep=2;
	//change indexing for IE - Opera also supports document.all, so check that it is not opera!! 
	if(document.all && navigator.appName.toLowerCase().indexOf('opera')==-1){
		y=0;
		iStep=1;
	}	
	for (x=y; x<document.getElementById(lstParentID).childNodes.length;x+=iStep){
		document.getElementById(lstParentID).childNodes[x].firstChild.src=document.getElementById(lstParentID).childNodes[x].firstChild.src.replace(/on|hv/i,'nm');
	}
	objOn.src=objOn.src.replace(/on|hv|nm/i,'on');
	sTemp=objOn.src
}
 
</script>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	color:#333333;
	background-color:#383838;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	font-size:80%;
}
 
a {
	color:#0066CC;
}
 
a:visited {
	color:#0066CC;
}
 
a:hover {
	color:#0033CC;
}
 
 
p {
	padding: 0px;
	margin:0px 0px 16px 0px;
	line-height:130%;
}
 
.bgMain {
	background-image:url(../images/bg_main.gif);
	background-repeat:repeat-y;
	width:976px;
}
 
.bgCopyright {
	background-repeat:no-repeat;
	width:976px;
	height:39px;
}
 
.bgFooter {
	background-image:url(../images/bg_footer.gif);
	background-repeat:no-repeat;
	width:976px;
	height:39px;
}
 
.contentContainer {
	width:880px;
	padding:20px 48px 16px 48px;
	text-align:left;
}
 
.headerContainer {
	width:976px;
	padding:0px 16px 16px 16px;
}
 
.footerContainer {
	padding:4px 16px 16px 16px;
}
 
.pNavContainer {
	width:966px;
	padding:10px 0px 8px 0px;
	text-align:right;
}
 
.pNav {
	padding: 0px 16px 0px 0px;
}
 
.fNav {
	font-size:11px;
	color:#333333;
	text-decoration:none;
	padding: 0px 3px 0px 3px;
}
 
.fNav a.fNav, a.fNav:visited {
	color:#333333;
	text-decoration:none;
}
 
.fNav a, a:hover {
	text-decoration:underline;
}
 
 
.clearBoth {
	clear:both;
}
 
.caseImage {
	float:right;
	width:240px;
	height:160px;
	margin:0px 0px 10px 10px;
	border:1px solid black;
}
 
.caption {
	font-size:80%;
	text-align:right;
}
 
 
h1 {
 
}
 
h2 {
	font-size:110%;
}
 
h3 {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:120%;
	font-weight:bold;
	margin:5px 0px 5px 0px;
	padding:5px 0px 5px 0px;
	clear:both;
	color:#000000;
}
 
h4 {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:100%;
	font-weight:bold;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	clear:both;
	color:#000000;
}
 
.dividerH {
	border-top-style:solid;
	border-top-color: #cccccc;
	border-top-width:1px;
	margin:10px 0px 0px 0px;
}
 
.tabDescription {
	margin:0px 0px 0px 0px;
}
 
.imgLanding {
	bottom:0px;
	right:0px;
	float:right;
	width:290px;
	/* border-style:solid;
	border-width:1px;
	border-color:#cccccc; */
}
 
.imgTabDesc {
	bottom:0px;
	right:0px;
	float:right;
	margin:0px 0px 16px 16px;
	width:160px;
}
 
.moreInfo {
	padding:10px 0px 0px 0px;
}
 
 
/* lists */
 
 
ul {
	width:70%;
	margin:0px;
	padding:10px 0px 0px 20px;
	line-height:150%;
}
 
 
ul.landing {
	margin:0px;
	padding:10px 0px 0px 20px;
	line-height:150%;
	font-weight:bold;
	color:#ff0000;
}
 
ul.landing a:link {
	color:#ff0000;
}
 
/* end lists */
 
.introCopy {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:110%;	
	color:#333333;
	line-height:130%;
	width:100%;
	margin:10px 0px 10px 0px;
}
 
.introHeader {
	font-family:Tahoma,Arial,Verdana,sans-serif;
	font-size:150%;	
	font-weight:bold;
	color:#000000;
	line-height:130%;
}
 
.wrapperContent {
	width:100%;
}
 
.wrapperColumn1 {
	width:65%;
	float:left;
}
 
.wrapperColumn2 {
	width:30%;
	float:right;
	vertical-align:text-bottom;
}
 
.columnDivider {
	float:left;
	width:40px;
	height:400px;
	margin:10px 0px 10px 0px;
	background: url('/images/columnDivider.gif') repeat-y;
}
 
.divClearFloat, .clsDivClearBoth {
	clear:both;
	height:15px;
}
 
.clsDivFormLabel{
	width:150px;
	float:left;
}
 
.clsDivFormInputText, .clsDivFormInputTextArea{
	float:left;
}
 
/* Links */
 
p.moreInfo_wrap {
	float: left;
}
 
a.moreInfo {
	font-size: 90%;
	font-family:Tahoma,Arial,Verdana,sans-serif;
	color: #1d1b19;
}
 
a.moreInfo:hover {
	color: #2d6ea8;
}
 
/* end links */
 
 
#divContentWrapper{
	width:959px; /* change this width to desired page width; contents will scale */	
	margin:auto;	/* 0 for left alignment - auto for center alignment */
	text-align:left;	
}
 
#divPageHeader {
	position:relative;
	width:100%;
	height:110px;
	text-align:center;
	color:#000000;
	padding-top:0px;
}
 
#divLogoLeft {
	position:absolute;
	left:0;
	top:0;
}
#divTagLineLeft {
	font-weight:bolder;
}
 
#divLogoRight {
	position:absolute;
	right:0;
	top:0;
	width:460px;
	height:102px;
	background: url('/images/hNav_background.gif') no-repeat top center;
}
#divGlobalNav {
	position:relative;
	right:0;
	top:0;
	width:460px;
	height:102px;
}
 
 
 
#divTagLineRight {
	font-weight:bolder;
}
 
#divHeaderName {
	margin-top:10px;
	font-size:24pt;
	font-weight:bolder;
}
 
 
#divMainNav {
	height:25px;
	position:absolute;
	text-align:center;
	left:0px;
	bottom:0px;
	width:100%;
	z-index:100;
}
 
 
#divMainContent {
	padding:0px 0px 0px 0px;
	position:relative;
	width:100%;
	z-index:0;
	min-height:400px;
}
 
#divSecondNav {
	position:relative;
	z-index:2;
	padding:0px 0px 0px 0px;
	background: url(/images/sNav_filler.gif) repeat-x;
	height:23px;
	 /*float:left; left side menu layout */
 
}
#divSecondNavInner {
	position:relative;
	padding:0px 0px 0px 0px;
	top:0px;
	left:0px;
	z-index:2;
	height:23px;
}
 
.tdSecondNav {
	padding:0px;
	margin:0px;
	color:black;
	text-align:left;
	position:relative;
	z-index:2;
}
 
.tdSecondNav a{
 
 
}
 
#divTertNav{
	margin-top:10px;
 
} 
 
 
#divPageContentNarrow {
	padding-top:0px;
	width:98%;
	color:#000000;
	/*float:right;  left side menu layout */    
}
 
#divPageContentWide {
	padding-top:0px;
	width:98%;
	color:#000000;
	float:right; /* left side menu layout */     
}
 
#divBreadCrumbs {
	position:relative;
	width:100%;
	font-size:8pt;
	padding:0 0 15px 0;
	color:red;
	padding-left:0px;
	margin-top:20px;
}
 
#divPageContentHeader {
	position:relative;
	width:100%;
	font-size:18pt;
	font-weight:bold;
	padding:0px 0px 0px 0px;
	margin:0px;
}
 
#divPageContentBody {
	padding-top:15px;
}
 
#divPageFooter {
	position:relative;
	width:100%;
	height:80px;
	text-align:center;
	color:#000000;
	font-weight:bolder;
	border-top:1px solid #999999;
	padding-top:5px;
	margin-top:10px;
}
 
#divCopyright {
	position:relative;
	bottom:0px;
	left:0;
	color:#00008B;
	text-align:right;
	width:100%;
	font-size:12pt;
	display:block;
}
 
#divLastUpdated {
	color:red;
	font-size:8pt;
	text-align:center;
}
 
tr {
	vertical-align:top;
}
 
/* Main Menu Styles */
 
.sMainMenu1{
	border:	none;
} 
 
.sMainMenu2, .sMainMenu3 {
	border:1px solid black;
	background-color:white;
}
 
.sMainMenuText1, .sMainMenuText2, .sMainMenuText3 {
	color:black;
	font-size: 8pt;
	text-decoration:none;
}
 
/* Form Styles */
 
 
 
.clsFormContainer {
	padding:20px 0 0 0 ;
}
 
.clsFormLabel {
	width:30%;
	float:left;
}
 
#divEditFormLastNameInput, #divEditFormFirstNameInput, #divEditFormGroupNameInput {
	width: 25%;
	float:right;
	
}
 
 
#divFormButtonCancel, #divFormButtonReset, #divFormButtonSubmit{
	width:25%;
	margin:0;
	float:left;
	text-align:center;
}
 
.clsFormSelInput, .clsFormTextInput, .clsFormFileInput {
	width:35%;
	float:left;
	margin:0;
	border:2px solid black;
}
.clsFormButton {
	width:80px;
}
 
.clsDivider {
	margin-top:15px;
	margin-bottom:10px;
	border-top: 3px double black;
	
}
 
.clsPageContainer {
	padding-top:10px;
}
 
.clsPageSubHeading {
	font-size:14pt;
	font-weight:bold;
}
#divTabbingContainer {
	min-height:400px;
	overflow-y:auto;
	position:relative; 
}
 
#divSettingsContainer {
	position:relative; 
 
} 
 
.clsSectionHeaderOn {
	background-color:#ffffff;
	font-size:10pt;
	color:black;
	width:100px;
	padding-left:5px;
	border-left:2px solid black;
	border-top:2px solid black;
	border-right:2px solid black;
}
 
.clsSectionHeaderOff {
	background-color:#ffffff;
	font-size:10pt;
	color:black;
	width:100px;
	padding-left:5px;
	border-left:1px dotted black;
	border-top:1px dotted black;
	border-right:1px dotted black;
	border-bottom:2px solid black;
}
.clsSectionHeaderOff:hover {
	background-color:#ffffff;
}
 
.clsSubSectionOn {
	background-color:#ffffff;
	font-size:10pt;
	color:black;
}
 
.clsEmphaticSmall {
	font-size:8pt;
	color:red;
	font-weight:bold;
}
 
.clsDivSpacer {
	height:20px;
}
 
.clsFormSubHeading {
	font-size:10pt;
	font-weight:bold;
	border-bottom:1px dashed black;
}
 
#tabFaxInBox th, #tabVoicemailInBox th{
	padding-top:5px;
	border-bottom:2px double black;
	text-align:center;
	vertical-align:top;
}
 
#tabFaxInBox td, #tabVoicemailInBox td{
	padding-top:5px;
}
 
#divAdminTools, #divSupportTools, #divMyTools {
	margin-right:25px;
	
}
 
.clsToolsHeader {
	padding-bottom:15px;
}
 
form, .clsText, .clsSubmit{
	display:inline;
	white-space : nowrap;
}
 
#divClientExtensions {
	float:left;
	width:20%;
	border:1px solid red;
}
.clsActiveExtension input {
	margin:0;
	padding:0;
	white-space : nowrap;
}
#divActiveExtensionsHeader {
	padding-bottom:10px;
	
}
.clsActiveExtension {
	padding:3px 5px 2px 10px;
	font-size:10pt;
}
 
#divInActiveExtensionsHeader {
	padding-bottom:10px;
	
}
.clsInActiveExtension {
	padding:3px 5px 2px 10px;
	font-size:10pt;
}
 
.clsTextInput {
	border:2px solid black;
}
 
.clsFromSectionSubHeading {
	font-weight:bold; 
	padding-bottom:5px;
}
 
.clsWorkWithExt {
	width:184px;
	color:white;
	background-color:#0000cd;
}
 
.clsButAssignExt {
	width:184px;
	color:white;
	background-color:#ff6347;
}
 
#divCallout {
	float:right;
	width:120px;
	height: 200px;
	padding:5px;
	font-size:10pt;
	border-left:1px solid black;
}
#divCallout div {
	padding: 2px 0 3px 0;
}
#divCallout div a {
	text-decoration:none;
}
 
a img {
	border:0;
 
}
 
#imgPageTitle{
	position:relative;
	z-index:1;
}
 
.clsTinyMCESection{
	margin-bottom:10px;
}
 
.clsClearBoth{
	clear:both;
}
 
/* begin tab menu style */
/* base container style */
#divTabContainer{
	width:100%;
}
 
/* content window (div) where ajax response to be written */
#divTabContent{
	/*height:300px;
	padding:10px;
	position:relative;*/
	/*border:1px solid gray; border should to be same color as clsTabOff bg colour for best look */
}
 
/* tabs are list items - set list style */
#ulTabList {
	margin:0;
	list-style-type:none;
	padding:0;
}
 
/* div containing tab list items, having them in this div allows for ease of placement 
allows overlapping placement of menu item layer/div with content layer/div */
#divTabList{
	position:relative;
	z-index:10;
}
 
/* list item style - mainly intended to be used if tabs are text but margins can be important */
#ulTabList li{
	width:100px;
	float:left;
	margin:0 5px -1px 0px;
	border:1px solid gray;
	border-bottom:none;
	text-align:center;
	list-style-type:none;
	padding:0;
	cursor:pointer;
}
 
/* only used for text tabs - set 'on' state style */
.clsTabOn{
	background-color:#ffffff;
	color:#000000;
	cursor:pointer;
}
 
/* only used for text tabs - set 'off' state style */
.clsTabOff{
	background-color:gray;
	color:#ffffff;
	cursor:pointer;
}
 
/* end tab menu style */
 
</style>
</head>
 
<body>
 
<div align="center" id="mainContainer">
 
<div class="headerContainer">
 
<div style="float:left;position:relative;left:30px;top:20px;">
	<a href="/p_home.cfm"><img src="/images/header_logo.gif" alt=""></a>
</div>
 
<div class="clearBoth"></div>
</div> <!-- end headerContainer -->
 
<div class="pNavContainer">
	<a href="/p_home.cfm" onmouseover="MM_swapImage('pNav_home','','/images/pNav_home_hv.gif');" onmouseout="MM_swapImage('pNav_home','','/images/pNav_home_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_home_nm.gif" border="0" name="pNav_home"></a>
	<a href="/p_about.cfm" onmouseover="MM_swapImage('pNav_about','','/images/pNav_about_hv.gif');" onmouseout="MM_swapImage('pNav_about','','/images/pNav_about_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_about_nm.gif" border="0" name="pNav_about"></a>
	<a href="/p_vision.cfm" onmouseover="MM_swapImage('pNav_vision','','/images/pNav_vision_hv.gif');" onmouseout="MM_swapImage('pNav_vision','','/images/pNav_vision_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_vision_nm.gif" border="0" name="pNav_vision"></a>
	<a href="/p_program.cfm" onmouseover="MM_swapImage('pNav_program','','/images/pNav_program_hv.gif');" onmouseout="MM_swapImage('pNav_program','','/images/pNav_program_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_program_nm.gif" border="0" name="pNav_program"></a>
	<a href="/p_services.cfm" onmouseover="MM_swapImage('pNav_services','','/images/pNav_services_hv.gif');" onmouseout="MM_swapImage('pNav_services','','/images/pNav_services_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_services_nm.gif" border="0" name="pNav_services"></a>
	<a href="/p_gallery.cfm" onmouseover="MM_swapImage('pNav_gallery','','/images/pNav_gallery_hv.gif');" onmouseout="MM_swapImage('pNav_gallery','','/images/pNav_gallery_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_gallery_nm.gif" border="0" name="pNav_gallery"></a>
	<a href="/p_contact.cfm" onmouseover="MM_swapImage('pNav_contactus','','/images/pNav_contactus_hv.gif');" onmouseout="MM_swapImage('pNav_contactus','','/images/pNav_contactus_nm.gif');" onfocus="if( this.blur )this.blur();" class="pNav"><img src="/images/pNav_contactus_nm.gif" border="0" name="pNav_contactus"></a>
</div> <!-- end pNavContainer -->
 
<div class="bgMain" id="divBgMain">
 
<div class="contentContainer">
 
<div class="wrapperContent">
	
	<div class="wrapperColumn1">
 
<div style="position:relative;top:-20px;left:-40px;background:#ffffff; background-image: url('./images/landing_home.jpg');background-repeat:no-repeat;background-position:center top; width:960px; min-height:558px;border:1px solid gold; z-index:0;">	<!-- border is just dtil issue resolved -->
 
	<div id="divTabContainer" style="position:relative; top:400px;left:0; width:100%;">
	
		<ul id="ulTabList" style="margin-left:15px;">
			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img1" src="/images/pNav_corporate_nm.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.school','divTabContent')"></li>
			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img2" src="/images/pNav_corporate_on.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('about.course','divTabContent')"></li>
			<li onclick="setImage(this.parentNode.id, this.childNodes[0])"><img id="img3" src="/images/pNav_corporate_hv.gif" onmouseover="sTemp=this.src;if(this.src.indexOf('_on')==-1){this.src='/images/pNav_corporate_hv.gif'}" onmouseout="this.src=sTemp;" onclick="getSource('our.mission','divTabContent')"></li>
		</ul>
		<div class="clsClearBoth"></div>
	
		<div id="divTabContentContainer">
			<div id="divTabContent" class="clsTabContent" style="position:relative;border:1px solid black"> <!-- border is for testing only --->
				
			</div>
			<div style="clear:both;"></div>
		</div>
	</div>
</div>
 
	</div> <!-- end wrapperColumn1 -->
 
</div> <!--  end wrapperContent -->
 
<div class="divClearFloat"></div>
 
<div class="dividerH"></div>
 
<div class="wrapperContent">
	
<div class="wrapperColumn1">
	
 
</div> <!-- end first column -->
 
	
	
	<div class="wrapperColumn2">
	
	
	</div> <!-- end second column -->
 
</div> <!--  end wrapper -->
 
<div class="divClearFloat"></div>
 
</div> <!-- end contentContainer -->
 
 
</div> <!-- end bgMain -->
 
<div class="bgFooter">
 
<div class="footerContainer">
<div style="float:left;">
<span class="fNav"></span>
</div>
 
<div style="float:right;">
<a href="/p_home.cfm" class="fNav">Home</a>
<a href="/p_about.cfm" class="fNav">About</a>
<a href="/p_vision.cfm" class="fNav">Our Vision</a>
<a href="/p_program.cfm" class="fNav">The Program</a>
<a href="/p_services.cfm" class="fNav">Services</a>
<a href="/p_gallery.cfm" class="fNav">Gallery</a>
<a href="/p_advanced.cfm" class="fNav">Alumni Login</a>
<a href="/p_contact.cfm" class="fNav">Contact Us</a>
</div>
 
<div class="clearBoth"></div>
 
 
</div>	<!-- end fNav -->
 
 
 
</div>	<!-- end wrapper -->
 
<div class="bgCopyright">
 
<div class="footerContainer">
<div style="float:left;">
<span class="fNav"><img src="/images/fNav_copyright.gif" alt=""></span>
</div>
 
<div style="float:right;">
	<img src="/images/fNav_address.gif" alt="">
</div>
 
<div class="clearBoth"></div>
 
 
</div>	<!-- end fNav -->
 
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of James Rodgers
James Rodgers
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial