Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 476
  • Last Modified:

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

0
slightlyoff
Asked:
slightlyoff
  • 4
  • 3
  • 2
  • +1
1 Solution
 
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
 
cfEngineersCommented:
try bottom:0 so it stays at the bottom inside the container with height:100%;
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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:
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
 
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now