Positioning / div growth issue

**Irishjugg** · 08-20-2008, 01:35 PM

Hello,

I have been working with a certain page layout for a while and got some wonderful help with images from another member.

Right now I have a problem where when I add text to my div id=inner inside my content div (separate inner div to have correct padding for image and text lineup) the content div doesn't extend to fit the content. I have it as a position: relative element which is what I think is the problem and wont properly let the div grow. When I make the elements any different positions I lose my layout and/or the sections.

Some help with how to fix these issues, one or the other would be greatly appreciated, and probably help my (mis)understanding of CSS positioning and block element expansion.

Current page with dummy text is at:

http://eatechsolutions.vndv.com/bb/home.htm

two code chunks are used:

home.htm:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 

lang="en">
 <head>
  <title>ND Best Buddies</title>
  <meta http-equiv="Content-Type" content="text/html; 

charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="scheme.css" />
  </head>
  <body>
   <div id="topstripe"></div>
   <div id="center">
    <div id="tspacer"></div>
    <div id="wrapper">
     <div id="header">
		
	  <div id="lspacer"></div>
	  <ul>    
	   <li class="lcapend"></li>    
	   <li>Home</li>    
	   <li>My Buddy</li>    
	   <li>Friendship Updates</li>    
	   <li>Event Schedule</li>    
	   <li>Event Feedback</li>    
	   <li>Associate Buddies</li>    
	   <li class="rcap"></li>   
	  </ul>   
	  <ul id="admin">    
	   <li class="lcap"></li>    
	   <li>Admin</li>    
	   <li class="rcap"></li>   
	  </ul>
	  <img src="images/headertopbg.png" class="headtop" />
	  <img src="images/headerbottombg.png" 

class="headbottom" />
     </div>  
     <div id="vspacer"></div>  
     <div id="content"> 
      <div id="inner"> <!-- USED FOR PADDING LEFT -->
		<p>TEST TEXT<br>213<br>324<br>tryTEST 

TEXT<br>213<br>324<br>tryTEST TEXT<br>213<br>324<br>tryTEST 

TEXT<br>213<br>324<TEST TEXT<br>213<br>324<br>tryTEST 

TEXT<br>213<br>324<br>tryTEST 

TEXT<br>213<br>324<br>trybr>try</p>
      </div>
	  <img src="images/contenttopbg.png" class="contop" />
	  <img src="images/contentbottombg.png" 

class="conbottom" />
     </div> <!-- CLOSE FOR CONTENT DIV -->
    </div> <!-- WRAPPER CLOSE, FOR ALIGNMENT -->
   </div> <!-- Close CENTER -->
   <img src="images/bottomcap.png" class="bottomcap" />
  </div> 
 </body>
</html>

and scheme.css

Code:

body {

	text-align: center;

	font-family: calibri, arial;
	
	font-size: 16px;

	background-color: white;

	margin: 0px;
	
	color: black;

}

p {
	color: black;
	z-index: 10;
	position: absolute;
}

#topstripe {

	/*background-color: #FFAE5E;*/
	background-image: url('images/orangish.png');

	background-repeat: repeat-x;

	text-align: left;

 	height: 168px;

	width: 100%;

	position: absolute;

	left: 0px;

	top: 40px;

}



#center {

	margin: 0 auto;

	width: 1020px;

	text-align: left;

	position: relative;

	top: 0px;

	/*background-color: gray;*/

	background-image: url('images/yellowness.png');

	background-repeat: repeat-y;


	overflow: hidden;

}



#tspacer {

	width:100%;

	height: 88px; /* 88 */

}



#vspacer {

	width: 100%;

	height: 20px;

	clear: both;

}

#lspacer {
	height: 1px;
	width: 40px;
	float: left;
}

#header {

	width: 980px;

	height: 154px;
	position: relative;

	/*background-color: white;*/
	background-image: url('images/panelsmiddle.png');
	background-repeat: repeat-y;
	background-position: right;
	/*background-attachment: fixed;*/
	float: right;

	padding-right: 14px;
	z-index: 1;
}

img.headtop {
	position: absolute;
	top: 0px;
	right: -1px;
	
	z-index: 0;
}

img.headbottom {
	position: absolute;
	bottom: -12px;
	right: 0px;
	z-index: 1;
}

img.bottomcap {
	position: relative;
	bottom: 0px;
	right: 0px;
	z-index: 1;
}

#header ul {

	height: 27px;

	/*background-color: lightblue;*/
	

	color: white;

	font-weight: bold;

	margin: 0;

	padding: 0;

	position: relative;

	float: left;

	top: 128px;
	
	padding-left: 24px;
	
	z-index: 2;
	
}



ul#admin {

	float: right;
	padding-left: 0px;
	padding-right: 24px;
}





li {

	list-style: none;

	float: left;

	text-align: center;

	padding-left: .5em;

	padding-right: .5em;

	height: 27px;

	line-height: 25px;
	
	background-image: url('images/orangebar.png');
	
	background-repeat: repeat-x;
	
	/*border-right: 1px inset black;*/
}



li:hover {

	background-image: url('images/purple.png');

}



#admin li { 

	width: 80px;

	padding-left: 0;

	padding-right: 0;

	/*background-image: url('images/orangebar.png');*/

}



li.lcapend {

	width: 15px;
	
	line-height: 25px;
	

	/*background-color: gray;*/

	padding-left: .3em;

	padding-right: 0;
	
	background-image: url('images/leftendcaporg.png');
	
	background-repeat: no-repeat;

	background-position: right;
}


li.rcap {

	width: 14px;

	/*background-color: gray;*/

	padding-left: 0;

	padding-right: .3em;

	background-image: url('images/rightmidcaporg.png');
	
	background-repeat: no-repeat;

	background-position: left;
}



#admin li.lcap {

	width: 15px;

	padding-left: .3em;

	padding-right: 0;
	
	background-image: url('images/leftmidcaporg.png');
	
	background-repeat: no-repeat;

	background-position: right;
	
	z-index: 3;

}


#admin li.rcap {

	width: 15px;

	/*background-color: gray;*/

	padding-left: 0;

	padding-right: .3em;

	background-image: url('images/rightendcaporg.png');
	
	background-repeat: no-repeat;

	background-position: left;

}


#content {

	width: 980px;

	min-height: 350px;
	height:auto !important;
	height:450px;
	position: relative;
	clear: right;
	float: right;
	padding-left: 0px;

	background-image: url('images/panelsmiddle.png');
	background-repeat: repeat-y;
	background-position: right;
	

}

#inner {
	float: left;
	padding-left: 54px;
	padding-top: 4px;
}

img.contop {
	position: absolute;
	top: 0px;
	right: 0px;
	
	z-index: 1;
}

img.conbottom {
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 1;
}

#wrapper {
	width: 980px;
	position: relative;
	float: right;
	
	background-image: url('images/wrappermiddle.png');

	background-repeat: repeat-y;
	
		background-position: right;
}

img.containtop {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
}

img.containbottom {
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 0;
}

**riptide** · 08-20-2008, 01:41 PM

there is a little code that you can add to the box that I got from some other forums.

position: relative;
height:100%;
overflow: hidden;
display:block;

**Irishjugg** · 08-20-2008, 02:07 PM

That is for the box I need to extend? Ill give it a try.

**riptide** · 08-20-2008, 04:26 PM

yes that should work.you should also add some padding if needed.

**Irishjugg** · 08-22-2008, 01:42 PM

I was unable to get that to work, it puts some spacing between my divs and such and doesnt extend my div to fit the test text.

**riptide** · 08-22-2008, 02:48 PM

what happened? did the whole div extend to the bottom of the page.

**Irishjugg** · 08-29-2008, 12:38 AM

nah, nothing extended at all, it just sort of had the same behavior

**Irishjugg** · 09-08-2008, 10:07 PM

Does anyone have any suggestions on how to help me here?

I think my issue is with relative vs. absolute and such. My knowledge however is getting me no where.

The original problem exists in full.

Thread: Positioning / div growth issue

Thread Tools

Search Thread

Positioning / div growth issue

bueller? anyone?

Bookmarks

Bookmarks

Posting Permissions