July 24, 2008 02:19pm pdt

1. hielo 439,097
2. Kravimir 406,743
3. Steggs 261,200
4. GreenGho... 94,190
5. VirusMinus 93,060
6. TName 83,385
7. zemond 73,885
8. glumlun 72,715
9. scrathcyboy 68,169
10. bluefezteam 64,657
11. jason1178 64,615
12. mplungjan 58,403
13. Rouchie 53,810
14. mreuring 50,639
15. Eternal_S... 47,243

1. VirusMinus 1,300,340
2. Steggs 1,099,790
3. GrandSch... 1,081,204
4. seanpow... 809,340
5. TName 782,768
6. Roonaan 485,352
7. hielo 456,565
8. Eternal_S... 425,220
9. COBOLdi... 415,775
10. Kravimir 406,743
11. mreuring 269,546
12. oceanbeach 262,232
13. Batalf 232,544
14. GoofyDawg 183,739
15. brunobear 180,148

05.10.2008 at 01:09PM PDT, ID: 23392012

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.2

how to make div full length of the page

Zone: Cascading Style Sheets (CSS)

i have attatch some simple code.
the problem i am having is that i need divs nav and body to be a height of 100% inside the container div
the content within both of these divs is variable.
i want to be able to use a bgcolor or image, and i need that color/image to go from the header to the footer.
In the included code snippet i would like the purple to go all the way to the footer like the yellow. As well if the yellow is actually smaller than the purple i would like it to go all the way to the bottom

Thanks
Randy

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:

           
           
             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
			#container{
				border: thin solid Blue;
			}
			#header{
				border: thin solid red;
				width: 100%;
				height: 100 px; 
			}
			#content{
				border: thin solid green;
				width: 100%;
				height: 100%; 
			}
			#footer{
				border: thin solid Black;
				width: 100%;
				height: 50 px; 
			}
			#nav{
				border: thin solid purple;
				width: 20%;
				float: left; 
				background: purple;
			}
			#body{
				border: thin solid yellow;
				width: 80%;
				float: left; 
				background: yellow;
			}
</style>
</head>
 
<body>
<div id="container">
	<div id="header">
	
	</div>
	<div id="content">
		<div id="nav">
			<ul id="menuUL" >
			            <li class="menuLI"><a class="menulink"   href="">my newsletter</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Home</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Directors Only</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Calendar of Events</a></li>
			            <li class="menuLI"><a class="menulink"   href="">test my</a></li>
			            <li class="menuLI"><a class="menulink"  target="_new"  href="http://www.google.com">google</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Unit Message Center</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Training Center</a></li>
			            <li class="menuLI"><a class="menulink"   href="">My 'lil Guestbook</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Director & Team Info</a></li>
			            <li class="menuLI"><a class="menulink"   href="">New Unit Members</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Photo Gallery</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Special Recognition</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Special Recognition(Cdn)</a></li>
			            <li class="menuLI"><a class="menulink"   href="">VoiceCast</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Red Jackets Only</a></li>
			            <li class="menuLI"><a class="menulink"   href="">google21 again</a></li>
			            <li class="menuLI"><a class="menulink"   href="">My Seminar Sisters</a></li>
			            <li class="menuLI"><a class="menulink"   href="">Announcements</a></li>
			    </ul>		
		</div>
		<div id="body">
<P>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed et nulla ut est cursus fermentum. Sed felis. Mauris lectus augue, elementum ullamcorper, mattis eu, congue et, sapien. Nullam sagittis venenatis sapien. Nunc eget dolor id tellus faucibus condimentum. Donec faucibus ultricies est. Nullam condimentum sapien at mauris. Pellentesque tellus enim, volutpat quis, ultrices id, tristique eget, est. Nullam pede quam, commodo sed, aliquet non, tempus et, elit. Proin cursus sollicitudin lacus. Ut augue eros, blandit sit amet, facilisis at, aliquet eu, felis. Suspendisse consectetuer, nunc nec facilisis mollis, libero tellus ultrices felis, ac consectetuer nisi nunc et ipsum. In pretium pede sit amet odio. In massa libero, porttitor in, cursus nec, fringilla venenatis, odio. Sed ut tellus sit amet risus convallis gravida. 
</P>
<P>
Nulla sapien quam, condimentum ac, vehicula vitae, volutpat vitae, pede. Vestibulum sollicitudin volutpat ligula. Nam viverra, metus euismod mollis porttitor, neque metus suscipit odio, ac congue erat nisl quis libero. Curabitur suscipit porta eros. Phasellus ac velit. Maecenas sem arcu, vehicula a, condimentum quis, ornare et, urna. Etiam vel neque. Etiam dolor. Fusce sodales bibendum diam. Cras hendrerit velit a sem. Morbi vel tellus. Aenean id velit imperdiet quam condimentum dapibus. Vivamus ultrices. 
</P>
<P>
Integer quam. Sed porta mauris porttitor odio. Praesent enim leo, dignissim ut, aliquam sit amet, faucibus et, diam. Nunc lacus magna, laoreet vel, eleifend non, pretium et, eros. Proin mauris. Nulla facilisi. Suspendisse pellentesque euismod augue. Fusce at quam quis pede congue pulvinar. Phasellus varius, ante sit amet vestibulum scelerisque, enim eros convallis erat, id placerat nisl purus quis felis. Nulla blandit, justo eget eleifend sagittis, elit leo aliquam neque, eget viverra tellus justo eu nunc. Mauris ac urna. Suspendisse eget diam vel nibh fringilla vestibulum. Nulla feugiat, pede nec pulvinar iaculis, purus pede feugiat ligula, non scelerisque lacus libero nec erat. Maecenas gravida. 
</P>
<P>
Integer quam. Sed porta mauris porttitor odio. Praesent enim leo, dignissim ut, aliquam sit amet, faucibus et, diam. Nunc lacus magna, laoreet vel, eleifend non, pretium et, eros. Proin mauris. Nulla facilisi. Suspendisse pellentesque euismod augue. Fusce at quam quis pede congue pulvinar. Phasellus varius, ante sit amet vestibulum scelerisque, enim eros convallis erat, id placerat nisl purus quis felis. Nulla blandit, justo eget eleifend sagittis, elit leo aliquam neque, eget viverra tellus justo eu nunc. Mauris ac urna. Suspendisse eget diam vel nibh fringilla vestibulum. Nulla feugiat, pede nec pulvinar iaculis, purus pede feugiat ligula, non scelerisque lacus libero nec erat. Maecenas gravida. 
</P>
<P>
Integer quam. Sed porta mauris porttitor odio. Praesent enim leo, dignissim ut, aliquam sit amet, faucibus et, diam. Nunc lacus magna, laoreet vel, eleifend non, pretium et, eros. Proin mauris. Nulla facilisi. Suspendisse pellentesque euismod augue. Fusce at quam quis pede congue pulvinar. Phasellus varius, ante sit amet vestibulum scelerisque, enim eros convallis erat, id placerat nisl purus quis felis. Nulla blandit, justo eget eleifend sagittis, elit leo aliquam neque, eget viverra tellus justo eu nunc. Mauris ac urna. Suspendisse eget diam vel nibh fringilla vestibulum. Nulla feugiat, pede nec pulvinar iaculis, purus pede feugiat ligula, non scelerisque lacus libero nec erat. Maecenas gravida. 
</P>
		</div>
	</div>
	<div id="footer">
	
	</div>
</div>
 
 
</body>
</html>

           
         

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: paries

Solution Provided By: Steggs

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

20080236-EE-VQP-29 / EE_QW_2_20070628