Forums

nchipping

I have been working on more and more pages for the site I've been doing (knowonder.com/index.php is the home page for it), but I am having to create a defined height for each of my main-content areas for each page, because they are different. Is there a way I can just make it fit automatically what is within it, and expand to what that is without having issues? I tried putting it to 100% and it just shrunk up into nothing, and everything collapsed...

The code I am having to change the height on each time is my container, which holds the pictures and main content. Does that make sense? I have used relative positioning on the container, so I can have absolute positioning within it, so I'm not sure if that is possibly what is messing things up, but I don't want to use margins to position things.

I would REALLY appreciate any help!

Here is my code of one page, and my main style sheet, just for reference:

<!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\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Knowonder - Subscribe</title>
<link href=\"../stylesheets/style.css\" rel=\"stylesheet\" type=\"text/css\" />
<link rel=\"shortcut icon\" href=\"../favicon.ico\" />
</head>
<body>
<div class=\"inside\">
	<div id=\"container\">
    	<div id=\"header\">
        	<a href=\"http://www.knowonder.com/index.php\"><img style=\"position:absolute; top:25px; left:25px;\" src=\"../images/knowonder-logo.png\" alt=\"Knowonder\" title=\"Home\" /></a>
            <div id=\"magazine-free\"><a href=\"#\"><img src=\"../images/free-magazine.png\" alt=\"Free Magazine\" title=\"Free Magazine\" /></a></div>
        	<div id=\"login\">
            	<ul>
                	<li><a href=\"#\"><img src=\"../images/login.png\" alt=\"Login\" title=\"Login\" /></a></li>
                    <li>|</li> 
                	<li><a href=\"#\"><img src=\"../images/sign-up.png\" alt=\"Sign Up\" title=\"Sign Up\" /></a></li>
                </ul>
            </div>
            
            
            <div class=\"clear\"></div>
            	
             <div id=\"nav\">
             	<ul>
                	<li><a href=\"http://www.knowonder.com/about\">ABOUT</a></li>
                    <li>|</li>
                    <li><a href=\"http://issuu.com/design6425/docs/knowonder_booklet?mode=embed&documentId=080529040150-ae5256223b8d4402887bcc3bf86be352&layout=grey\" target=\"_blank\">MAGAZINE</a></li>
                    <li>|</li>
                    <li><a href=\"http://www.knowonder.com/media\">MEDIA</a></li>
                    <li>|</li>
                    <li><a href=\"http://www.knowonder.com/subscribe\">SUBSCRIBE</a></li>
              	    <li>|</li>
                    <li><a href=\"http://www.knowonder.com/submit\">SUBMIT</a></li>
                    <li>|</li>
                    <li><a href=\"http://www.knowonder.com/contact\">CONTACT US</a></li>
                
                </ul>
        
        	 </div>
        
        </div><!-- END OF THE HEADER AREA -->
   			<div id=\"body2\">
           		<div id=\"left-pics\">
                	<img src=\"../images/magazine_cover-small.png\" alt=\"Magazine Cover\" /><br />
                    <img src=\"../images/kids_reading_small.gif\" alt=\"Kids Reading\" />
                </div>
                <div id=\"main-no-pics\">
                	<p style=\"font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#47C3D3\"><b>Subscribe</b></p>
                     <hr style=\"color:#47C3D3\" /><br /><br />
                     
                   
               			<div id=\"main-no-pics-l\">
               			
                        <p>check all that apply</p><br />
                        
                        <form>
                        <input type=\"checkbox\" name=\"subscribe\" value=\"magazine\" />&nbsp;&nbsp;&nbsp;&nbsp;  I would like to receive a FREE, physical, in-my-hand, 132 page copy of each &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new knowonder!&trade; issue.  I am more than happy to pay the nominal fee of <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ 0.79 to cover postage each month.  I understand that this amount will be &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;charged up-front to my credit/debit card.<br />
                        <input type=\"checkbox\" name=\"subscribe\" value=\"digital\" />&nbsp;&nbsp;&nbsp;&nbsp;  I would like to receive a FREE digital copy of each new issue in my inbox<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; every month.<br />
                      <br />
                        
                        <input type=\"submit\" value=\"Continue\" />
                        </form>
                        
                   </div>
                   
               
                   
                </div>
                <div id=\"right-pics\"> 	
                	<img src=\"../images/art_heart_small.gif\" alt=\"Heart\" /><br />
                    <img src=\"../images/mom_daughter_small.gif\" alt=\"Mom Gardening\" />
           		</div>
            </div>  
            <div class=\"clear\"></div>   
   
            						<div id=\"art-dizzle-page-orange\">	
            					<a href=\"http://www.knowonder.com/storytime\"></a>
                                </div>                                
  								
                                <div id=\"art-dizzle-page-green\">
                                <a href=\"http://www.knowonder.com/art\"></a>
								</div>
                                
            
                                <div id=\"art-dizzle-page-pink\">
                                <a href=\"http://www.knowonder.com/crafts\"></a>
                              	</div> 
   
        <div class=\"tr\"></div>
        <div class=\"tl\"></div>
        <div class=\"br\"></div>
        <div class=\"bl\"></div>
    </div><!--END OF CONTAINER AREA, AND THUS THE AREA WHERE ROUNDED CORNERS CAN BE -->    
    
    
</div><!-- END OF INSIDE, AND THUS THIS MAIN TOP PART OF THE PAGE -->
    
    <div id=\"container2\">
       <div class=\"box3\">
        <div id=\"left\">
        <img style=\"margin:20px auto;\" src=\"../images/what-others-say.png\" alt=\"What others are saying...\" />
        <p>“I can’t wait to get my hands on this magazine!  What a great idea! 
  I love reading, and I know the importance of having new matieral
  all the time to help my kids stay interested in reading.  Thank you,
  Knowonder, for such a great product!” <br /></p>
							    <p style=\"float:right;\">-- Janice B., NY. </p><br /><br />

<p>“Very cool, and also very cute!  This looks like a winner.  My family
  will be subscribing for a long time to come.”<br /> </p>
							    <p style=\"float:right;\">-- Susan K., MI.</p><br /><br />

<p>“As an elementary teacher, I can tell you that new material, every 
  day, is one of the biggest keys to helping a child love reading.  New 
  adventures, new problems, new challenges, new friendships...  
  There’s nothing like an exciting story to excite the imaginations of 
  our children.  I will support Knowonder!” <br /></p>
							<p style=\"float:right;\">-- Lucinda M., NB.</p><br /><br />
                            
            <div class=\"tr3\"></div>
            <div class=\"tl3\"></div>
            <div class=\"br3\"></div>
            <div class=\"bl3\"></div>
        </div><!--END OF THE LEFT AREA -->
    </div><!-- END OF BOX3 -->
        
        <div class=\"box4\">
        <div id=\"right\">
        <img style=\"margin:20px auto;\" src=\"../images/our_sponsors.png\" alt=\"Our Sponsors\" />
        <img style=\"margin:0px 0px 0px 90px;\" src=\"../images/sponsor logos/creativeMemories.jpg\" alt=\"Creative Memories\" />
        	<div id=\"right-nav\">
            	<ul>
               		<li><a href=\"#\"><img src=\"../images/play-arrow.png\" alt=\"Play\" title=\"Play\" /></a></li>
                    <li><a href=\"#\"><img src=\"../images/pause.png\" alt=\"Pause\" title=\"Pause\" /></a></li>
                    <li><a href=\"#\"><img src=\"../images/see-all.png\" alt=\"See All\" title=\"See All\" /></a></li>
                </ul>
            </div>
        
        	<div class=\"tr4\"></div>
            <div class=\"tl4\"></div>
            <div class=\"br4\"></div>
            <div class=\"bl4\"></div>
        </div><!--END OF THE RIGHT AREA-->
    </div><!-- END OF THE BOX4 -->
        <div class=\"clear\"></div>
    
    
    </div><!--THIS IS THE END OF THE SECOND AREA OF CONTENT, AND BODY STUFF - PROBABLY THE END OF THE PAGE -->
</body>
</html>

* 					{margin:0px; padding:0px;}

p 					{font-family:Arial, Helvetica, sans-serif;}

ul 					{font-family:Arial, Helvetica, sans-serif;}

img 				{text-decoration:none; border:none;}

body 				{background:url(../images/background_03.png); background-repeat:repeat;}

#container 			{width: 980px; height:660px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
	#container-contact 		{width: 980px; height:800px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
	#container-about 		{width: 980px; height:780px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
	#container-storytime 	{width: 980px; height:880px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
	#container-crafts 		{width: 980px; height:590px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
	#container-media 		{width: 980px; height:700px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
	#container-signup 		{width: 980px; height:740px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container2 		{width: 980px; position:relative; margin:30px auto;}
	#container2 p 	{margin:0px 50px 5px 50px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

#header 			{padding:5px 0px 0px 0px;}

	#login 			{float: right; list-style:none; color:#CCC; position:absolute; top:10px; left:840px;}
		#login ul 	{list-style:none;}
			#login ul li {list-style:none; float:left; padding:0px 5px 0px 5px;}
			
	#magazine-free 	{float: left; position:absolute; top:0px; left:390px;}

#nav 				{position:absolute; top:100px; left:0px; width:980px; height:25px; background:#E977AF; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
	#nav ul 		{list-style:none; position:absolute; top:5px; left:195px;}
		#nav ul li 	{list-style:none; float:left; padding:0px 10px 0px 10px;}
		#nav a 		{color:#FFF; text-decoration:none}
		#nav a:hover {color:#FFF; text-decoration:none;}
		#nav a:visited {color:#FFF; text-decoration:none}
		
#body 				{background: #D3EDF1; width:875px; height:480px; position: relative; border:#47C3D3 solid 1px;}
	#body-header 	{position: absolute; top:12px;}
	
	#body-left 		{float: left; width:232px; position:absolute; top:125px; left:25px;}
	
	#body-left2 	{float: left; width:253px; position:absolute; top:140px; left:285px; font-family:Arial, Helvetica, sans-serif;}
		#body-left2 p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}
	
	#body-right 	{float: right; width:253px; position:absolute; top:140px; right:35px; font-family:Arial, Helvetica, sans-serif;}
		#body-right p {color:#00AEEF; margin:5px 0px 40px 20px; font-size:13px;}
		
#winmoney 			{list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
	#winmoney ul 	{list-style:none; position:absolute; top:90px; left:60px;}
		#winmoney ul li {list-style:none; float:left; margin:0px 3px; }
		
		#winmoney a {text-decoration:none; color:#00AEEF;}
		#winmoney a:hover {text-decoration:underline; color:#00AEEF}
		#winmoney a:visited {text-decoration:none; color:#00AEEF;}
		
#winmoney2			{list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
	#winmoney2 ul 	{list-style:none; position:absolute; top:210px; left:60px;}
		#winmoney2 ul li {list-style:none; float:left; margin:0px 3px;}
		
		#winmoney2 a {text-decoration:none; color:#00AEEF;}
		#winmoney2 a:hover {text-decoration:underline; color:#00AEEF}
		#winmoney2 a:visited {text-decoration:none; color:#00AEEF;}
		
#winmoney3			{list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
	#winmoney3 ul 	{list-style:none; position:absolute; top:90px; left:60px;}
		#winmoney3 ul li {list-style:none; float:left; margin:0px 3px;}
		
		#winmoney3 a {text-decoration:none; color:#00AEEF;}
		#winmoney3 a:hover {text-decoration:underline; color:#00AEEF}
		#winmoney3 a:visited {text-decoration:none; color:#00AEEF;}		


#left 				{width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative;   margin:0px 0px 30px 0px;}
	#left-text		{position:absolute; top:120px;}

#right 				{width:468px; height:430px; border:#E977AF solid 1px; background:#FFF; position:relative;  margin:0px 0px 30px 0px;}

	#right-nav 		{position:absolute; top:400px; left:175px; list-style:none;}
		#right-nav ul {list-style:none;}
			#right-nav ul li {list-style:none; float:left; margin:0px 10px;}

#body2 				{background:#FFF; width:900px; position:relative;}
	#left-pics 		{float:left; width:160px; position:absolute; top:160px; left:30px;}
	#right-pics 	{float:right; width:160px; position:absolute; top:160px; right:-60px;}
	#main-no-pics 	{float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px;color:#666}
		#main-no-pics a{color:#666; text-decoration:none;}
		#main-no-pics a:hover{text-decoration:underline;}
		
	#main-about		{float:left; width:512px; position:absolute; top:160px; left:230px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666;}
		#main-about2 {margin:10px 0px; position:absolute; top:30px; left:0px;}
			#main-about2 a{text-decoration:none; color:#666}
	
		#main-no-pics-l	{float:left;}
			#main-no-pics-l input{margin:5px auto;}
	
			
/*THIS IS THE CSS FOR THE FORM STUFF OF THE WEBSITE*/

input.required		{width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}

select.required		{width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #000;}

td.required			{font-family:Arial, Helvetica, sans-serif; font-size:12px; }

input.optional		{width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #999;}

select.optional		{width: 200px;font-family:Arial, Helvetica, sans-serif; font-size:12px;border: solid 1px #666;}

td.optional			{font-family:Arial, Helvetica, sans-serif; font-size:12px; }

input.submit		{border: solid 2px #000;font-family:Arial, Helvetica, sans-serif; font-size:14px;}


/*THE END OF THE FORM CSS*/

		
	
	
#art				{width:875px; margin:30px auto; padding:0px 0px 20px 0px;}
	#art-pic		{float:left; width:244px; position:absolute; top:160px; left:30px;}
	#art-main		{float:left; width:545px; position:absolute; top:160px; left:230px;}
		#art-main p	{font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}
	#art-dizzle		{float:right; width:39px; margin:45px 6px 30px 0px;}
	#art-dizzle2	{float:right; width:39px; margin:87px 6px 30px 0px;}
	#art-dizzle3	{float:right; width:39px; margin:3px 6px 30px 0px;}
	
#art-main2		{float:left; width:545px; position:absolute; top:160px; left:320px;}
		#art-main2 p	{font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}	
	
#crafts-main		{float:left; width:545px; position:absolute; top:140px; left:320px;}
	#crafts-main p	{font-family:Arial, Helvetica, sans-serif; font-size:13px; margin:14px 0px 0px 0px;}
	
	
	#art-dizzle-page-orange{float:right; width:16px; height:40px; position:absolute; top:127px; right:0px; background:url(../images/yellow_slice.png) no-repeat}
		#art-dizzle-page-orange:hover {background:url(../images/orange.png) no-repeat; height:40px; width:45px;}
		#art-dizzle-page-orange a {display:block; width:100%; height:100%;}
		
	#art-dizzle-page-green {float:right; width:16px; height:40px; position:absolute; top:169px; right:0px; background:url(../images/green_slice.png) no-repeat}
		#art-dizzle-page-green:hover {background:url(../images/green.png) no-repeat; height:40px; width:45px;}
		#art-dizzle-page-green a{display:block; width:100%; height:100%;}
		
	#art-dizzle-page-pink  {float:right; width:16px; height:40px; position:absolute; top:212px; right:0px; background:url(../images/pink_slice.png) no-repeat}
		#art-dizzle-page-pink:hover {background:url(../images/pink.png) no-repeat; height:40px; width:45px;}
		#art-dizzle-page-pink a{display:block; width:100%; height:100%;}
		
	#art-buttons	{position:absolute; top:545px; left:0px;}
	#art-buttons ul {list-style:none;}
	#art-buttons ul li {list-style:none; float:left;}
	
	#art-buttons2	{position:absolute; top:345px; left:0px;}
	#art-buttons2 ul {list-style:none;}
	#art-buttons2 ul li {list-style:none; float:left;}
	
	#craft-buttons	{position:absolute; top:370px; left:0px;}
	#craft-buttons ul {list-style:none;}
	#craft-buttons ul li {list-style:none; float:left;}
	
	#list-l			{float:left; margin:0px 0px 0px 50px;}
	#list-r			{float:right; margin:0px 0px 0px 50px;}

	#art-main2		{float:left; width:545px; position:absolute; top:150px; left:320px;}
		#art-main2 p{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:15px 0px 0px 0px;}
	#art-nav-buttons{position:absolute; top:370px; left:-5px;}
		#art-nav-buttons ul {list-style:none}
		#art-nav-buttons ul li {list-style:none; margin: 10px 0px;}


	
		


/*HERE ARE WHERE THE CLASSES START*/
.clear 				{clear:both;}
.stories 			{color:#FF9933; font-size:22px;}
.art 				{color:#A0CF67; font-size:22px;}
.crafts 			{color:#F173AC; font-size:22px;}
.more 				{color:#5F4B9F; font-size:22px;}

/*BOX STUFF*/
.inside 		{width: 980px; position:relative; margin:30px auto;}
.inside .tl		{ position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.inside .tr		{ width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.inside .bl		{ width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.inside .br		{ width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

/*INNER BLUE BOX ROUNDED CORNERS*/
.box2 			{width: 875px; position:absolute; top:120px; left:50px; margin:30px auto;}
.box2 .tl2		{ position: absolute; width: 12px; height: 12px; background: url(../images/corners/images/tl.png); top: -1px; left: -1px; }
.box2 .tr2		{ width: 12px; height: 12px; background: url(../images/corners/images/tr.png); position: absolute; top: -1px; right: -1px; }
.box2 .bl2		{ width: 12px; height: 12px; background: url(../images/corners/images/bl.png); position: absolute; bottom: -1px; left: -1px; }
.box2 .br2		{ width: 12px; height: 12px; background: url(../images/corners/images/br.png); position: absolute; bottom: -1px; right: -1px; }

/*BOTTOM BOX ROUNDED CORNERS*/
.box3 		{width: 468px; position:absolute; top:0px; float:left;}
.box3 .tl3		{ position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.box3 .tr3		{ width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.box3 .bl3		{ width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.box3 .br3		{ width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

.box4 		{width: 468px; position:absolute; top:0px; right:0px; float:right;}
.box4 .tl4		{ position: absolute; width: 12px; height: 12px; background: url(../images/images/tl2_03.png); top: -1px; left: -1px; }
.box4 .tr4		{ width: 12px; height: 12px; background: url(../images/images/tr2_03.png); position: absolute; top: -1px; right: -1px; }
.box4 .bl4		{ width: 12px; height: 12px; background: url(../images/images/bl2_03.png); position: absolute; bottom: -1px; left: -1px; }
.box4 .br4		{ width: 12px; height: 12px; background: url(../images/images/br2_03.png); position: absolute; bottom: -1px; right: -1px; }

nchipping

Anyone have any ideas here? I really need some help please!

nchipping

Does ANYONE know how to get this right?

apostrophe

Slice it into 3 horizontal parts and repeat the centre one on the y axis.

nchipping

apostrophe,

I'm sorry, but I'm not quite clear on what you mean... Are you saying to take the #container div and make it 3 separate divs, each containing their own parts, like the header, body, and then the background between the main body and the two information pieces on the bottom of the site? I am willing to try a bunch of different solutions to fix this...

apostrophe

You will have to redo these images as I only had the flattened version to play with which made getting rid of the background difficult. But this should give you the idea.
html:

<div id=\"container\">
     <div id=\"container_top\">
	     <div id=\"container_bottom\">
               THE CONTENT
        </div><!--container_bottom-->
     </div><!--container_top-->
 </div><!--container-->

and the css:

#container {
background:transparent url(path/to/bg_container_center.jpg) repeat-y scroll 0 0;
float:left;
width:982px;
}

#container_top {
background:transparent url(path/to/bg_container_top.jpg) no-repeat scroll 0 0;
float:left;
width:982px;
}

#container_bottom {
background:transparent url(path/to/bg_container_bottom.jpg) no-repeat scroll left bottom;
float:left;
width:982px;
}

nchipping

So let me make sure I'm understanding what you're saying correctly...

You are saying to put the div #container_bottom inside the #container_top, which is inside the div #container - correct? The #container_bottom would hold the main content, and then the top would be there and then the #container around it all. Is that what you meant?

I'm sorry if my brain is just fried, but I can't understand how that would work - could you please try to explain it a little further?

apostrophe

I've done it for you and I really don't see how I can make it any clearer, the code and the images speak for themselves.

treehouse : what would you like to learn today?

Forums

Still need help with collapsing pages...