CSS Grow DIV layer vertically with content.

Ok, I'm having fun with this.  For some reason, I can't get my content div's to grow with the content in them.  If I specifically state the height, such as 300px; it works... height:100% doesn't.

I've followed several tutorials with now luck.

I'm attaching the css i'm using as well as the html.

Any help would be appreciated!!!
@charset "utf-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
}

html{
	height:100%;
}

body {
	height:100%;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-image:url(../Images/texture.jpg);
	background-repeat:repeat;
}

div#wrapper {
	position:relative;
	border:thin  #FFFFFF solid;
	width:1000px;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
	margin:auto;
	margin-top:25px;
	background-color:#333333;
	-moz-box-shadow: 3px 3px 4px #000; 	  
	-webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
    
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
  
/* For IE 5.5 - 7 */ 
    
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 

}

div#theNav{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:absolute;
	width:391px;
	height:20px;
	left:601px;
	top:56px;
	color:#FFFFFF;
}



div#left-title{
	position:absolute;
	background-image:url(../Images/specials.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:48px;
	top:5px;
	z-index:2;
}

div#right-title{
	position:absolute;
	background-image:url(../Images/designers.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:749px;
	top:5px;
	z-index:2;
	
}


div#leftCol-title{
	position:absolute;
	background-image:url(../Images/specials.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:7px;
	top:5px;
	z-index:2;
}

div#rightCol-title{
	position:absolute;
	background-image:url(../Images/our_services.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:235px;
	top:5px;
	z-index:2;
	
}



div#header{
	width:1000px;
	position:relative;
	height:79px;
	background-image:url(../Images/header_main.jpg);
	background-repeat:no-repeat;
}

div#whiteSpace{
	width:1000px;
	position:relative;
	height:3px;
	background-color:#FFFFFF;
}

div#mainImage{
	width:1000px;
	position:relative;
	height:356px;
	background-color:#666666;

}

div#subTitle{
	width:1000px;
	position:relative;
	height:30px;
	background-color:#2B2927;
}

div#subCont{
	width:1000px;
	position:relative;
	height:198px;
	background-image:url(../Images/middle_bg.jpg);
	background-repeat:repeat-y;
}

div#subCont_Page{
	width:1000px;
	color:#FFFFFF;
	position:relative;
	min-height:100%;
	height:100%;
	height:auto;
	background-image:url(../Images/middle_bg_2.jpg);
	background-repeat:repeat-y;
}

div#specialsInfo{
	position:absolute;
	width:283px;
	height:181px;
	color:#ffbd83;
	left:7px;
	top:8px;

}



div#leftCol{
	position:absolute;
	width:238px;
	color:#ffbd83;
	left:7px;
	top:8px;

}

div#mainCol{
	position:absolute;
	left:260px;
	width:728px;
	min-height:100%;
	color:#fff;
	font-size:12px;
}



div#footCont {
	width:1000px;
	position:relative;
	height:212px;
	background-color:#2B2927;
	color:#FFFFFF;
}

div#rightArea{
	position:absolute;
	left: 734px;
	top: 23px;
	width: 250px;
	height: 162px;
}

div#centerArea{
	padding-top:20px;
	position:absolute;
	left: 362px;
	top: 36px;
	width: 250px;
	height: 121px;
}

div#leftArea{
	position:absolute;
	width: 250px;
	height: 162px;
	left: 21px;
	top: 12px;
}

div#footer{
	width:1000px;
	position:relative;
	height:34px;
	background-color:#8A7751;
}



div#bottomNav{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:absolute;
	width:969px;
	height:20px;
	left:19px;
	top:8px;
	color:#FFFFFF;
}


--------------- HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

</head>

<body>
<div id="wrapper">
  <div id="header">
    <div id="theNav">Top Navigation Here</div>
  </div>
  <div id="whiteSpace"></div>
    <div id="subTitle">
    	<div id="leftCol-title"></div>
    	<div id="rightCol-title"></div>
  	</div>
    <div id="subCont_Page">
      <div id="leftCol">
      Needs to Grow
      </div>
   	  <div id="mainCol">
   	    <p>Hello</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p><br/>
          <br />
   	      This Section won't grow either.</p>
   	  </div>
  	</div>
    <div id="footCont">
    	<div id="leftArea">
			Hours Here...
        </div>
        <div id="centerArea">
       Services Here
      </div>
    	<div id="rightArea">
        Address Here
        </div>
        
  </div>
  <div id="whiteSpace">
    
  </div>
   <div id="footer">
    	<div id="bottomNav">
    	  Bottom Navigation Here...
    	</div>
  </div>
</div>
</body>
</html>

Open in new window

LVL 1
slightlyoffAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
Well, I don't know if this will help you or not, because I am not sure about the positioning of some of your elements.

But with this CSS the area you want to grow will grow.

I changed the markup of the whitespace divs to a class from an ID - ID's should be unique, only appearing on a page one time. Whitespace was there twice, so i changed it to a class, which can appear as many times as you want.

Also, I got rid of the div before every syntax in your CSS. Those are unnecessary

If this doesn't help you, disregard it. But the reason you are having issues is that you are using the position property and the top and left properties to move your elements around. This type of scalability and expandability can only be achieved with floats.

THIS IS VERY ROUGH. Personally, I would want to start over from scratch and code the whole thing from the ground up again, but I don't know how you want the elements placed, so that doesn't really work.

Let me know if you need anything else.

Also, for the sake of quick editing, I put the CSS in the head. Sorry for the roughness. It is some ugly code.

 
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}

html{
	height:100%;
}

body {
	height:100%;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-image:url(../Images/texture.jpg);
	background-repeat:repeat;
}

#wrapper {
	border:thin  #FFFFFF solid;
	width:1000px;
	height: 100%;
	margin:auto;
	margin-top:25px;
	background-color:#333333;
	-moz-box-shadow: 3px 3px 4px #000; 	  
	-webkit-box-shadow: 3px 3px 4px #000; 
        box-shadow: 3px 3px 4px #000; 
    
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, 

Direction=135, Color='#000000')"; 
  
/* For IE 5.5 - 7 */ 
    
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, 

Color='#000000'); 

}

#theNav{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:absolute;
	width:391px;
	height:20px;
	left:601px;
	top:56px;
	color:#FFFFFF;
}



#left-title{
	position:absolute;
	background-image:url(../Images/specials.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:48px;
	top:5px;
	z-index:2;
}
#right-title{
	position:absolute;
	background-image:url(../Images/designers.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:749px;
	top:5px;
	z-index:2;
	
}

#leftCol-title{
	position:absolute;
	background-image:url(../Images/specials.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:7px;
	top:5px;
	z-index:2;
}

#rightCol-title{
	position:absolute;
	background-image:url(../Images/our_services.jpg);
	background-repeat:no-repeat;
	width:202px;
	height:22px;
	left:235px;
	top:5px;
	z-index:2;
	
}



#header{
	width:1000px;
	height:79px;
	background-image:url(../Images/header_main.jpg);
	background-repeat:no-repeat;
        float: left;

}

.whiteSpace{
	width:1000px;
	height:3px;
	background-color:#FFFFFF;
        float: left;
}

#mainImage{
	width:1000px;
	position:relative;
	height:356px;
	background-color:#666666;

}

#subTitle{
	width:1000px;
	height:30px;
	background-color:#2B2927;
        float: left;
}

#subCont{
	width:1000px;
	position:relative;
	height:198px;
	background-image:url(../Images/middle_bg.jpg);
	background-repeat:repeat-y;
}

#subCont_Page{
	width:1000px;
	color:#FFFFFF;
	float: left;
	height:auto;
	background-image:url(../Images/middle_bg_2.jpg);
	background-repeat:repeat-y;
}

#specialsInfo{
	position:absolute;
	width:283px;
	height:181px;
	color:#ffbd83;
	left:7px;
	top:8px;

}



#leftCol{
	width:238px;
	color:#ffbd83;
	height: auto;
        float: left;
}

#mainCol{
	width:728px;
	color:#fff;
	font-size:12px;
        float: left;
        height: auto;
}



#footCont {
	width:1000px;
	float: left;
	height:212px;
	background-color:#2B2927;
	color:#FFFFFF;
}

#rightArea{
	position:absolute;
	left: 734px;
	top: 23px;
	width: 250px;
	height: 162px;
}

#centerArea{
	padding-top:20px;
	position:absolute;
	left: 362px;
	top: 36px;
	width: 250px;
	height: 121px;
}

#leftArea{
	position:absolute;
	width: 250px;
	height: 162px;
	left: 21px;
	top: 12px;
}

#footer{
	width:1000px;
	float: left;
	height:34px;
	background-color:#8A7751;
}



#bottomNav{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:absolute;
	width:969px;
	height:20px;
	left:19px;
	top:8px;
	color:#FFFFFF;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="header">
    <div id="theNav">Top Navigation Here</div>
  </div>
  <div class="whiteSpace"></div>
    <div id="subTitle">
    	<div id="leftCol-title"></div>
    	<div id="rightCol-title"></div>
  	</div>
    <div id="subCont_Page">
      <div id="leftCol">
   	    <p>Needs to Grow</p>
   	    <p>&Needs to Grow</p>
   	    <p>Needs to Grow</p>
   	    <p>&Needs to Grow</p>
   	    <p>Needs to Grow;</p>
   	    <p>Needs to Grow</p>

      Needs to Grow
      </div>
   	  <div id="mainCol">
   	    <p>Hello</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>
   	    <p>&nbsp;</p>

   	    <p><br/>
          <br />
   	      This Section won't grow either.</p>
   	  </div>
  	</div>
    <div id="footCont">
    	<div id="leftArea">
			Hours Here...
        </div>
        <div id="centerArea">
       Services Here
      </div>
    	<div id="rightArea">
        Address Here
        </div>
        
  </div>
  <div class="whiteSpace">
    
  </div>
   <div id="footer">
    	<div id="bottomNav">
    	  Bottom Navigation Here...
    	</div>
  </div>
</div>
</body>
</html>

Open in new window

0
 
cfEngineersCommented:
div#subCont_Page{
      width:1000px;
      color:#FFFFFF;
      position:relative;
      min-height:100%;
      height:100%;
      height:auto;
      background-image:url(../Images/middle_bg_2.jpg);
      background-repeat:repeat-y;
}

get rid of height:auto;
0
 
slightlyoffAuthor Commented:
Thanks for the quick reply.

It didn't work.  After removing the height:auto;, i'm still having the same issue.  If I put min-height:500px; - it grows correctly, but obviously that's not good for dynamic content (which is what I want this page to be able to handle).
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
cfEngineersCommented:
try bottom:0 so it stays at the bottom inside the container with height:100%;
0
 
askurat1Commented:
Try this:
div#subCont_Page{
      width:1000px;
      color:#FFFFFF;
      position:relative;
      height:auto;
      padding: 20px;
      background-image:url(../Images/middle_bg_2.jpg);
      background-repeat:repeat-y;
}

Open in new window

0
 
jonahzonaCommented:
This needs a lot of work.

I can tell you that a lot of your problems are your position properties. (position: absolute) as well as your top and left properties.

I will post what I come up with in a few minutes.
0
 
slightlyoffAuthor Commented:
Thank you for your help!  I appreciate any criticism - it can only help in the future!
0
 
jonahzonaCommented:
I am getting close. Will post in a couple minutes.
0
 
jonahzonaCommented:
Did this work for you? Any progress to update?
0
 
slightlyoffAuthor Commented:
Hey Jonah,

It did work - the section grows as desired - some elements aren't quite working on the page - I was playing around with it all day yesterday, but I think i'm on the right track now...  

Sorry i didn't respond before the weekend.  I really appreciated the help!!!

Best Regards,

Steve
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.