nav extends beyond body content

How do I code this site so on limited content pages, the navigation doesn't extend beyond the content area?

http://www.nsitedesigns.com/nsitedesigns/steward/contact.html

Instant Access to this Solution

Plus...

30 Day FREE access, no risk, no obligation

Collaborate with the world's top tech experts

Unlimited access to our exclusive solution database

Never be left without tech help again

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

"The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.

"Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin

"Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Hi,

I have made one sample for you, it would help you to resolve this problem. Please check out the following code snippet.

SK

<!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>Steward Enterprise Inc Oil - Appleton, WI</title>
<style type="text/css"> 
<!-- 
body  {
	font: 0.75em Verdana, Arial, Helvetica, sans-serif;
	background: #f8cd4c;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}
#container { 
	width: 900px;
	background: #FFFFFF;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
	margin-top:10px;
}
#header {
padding-top:35px;
}
#header h1 { border-bottom:5px solid #FC0; padding:0; margin:0;}
#navigation {
	width: 150px;
	font-family: Arial, Helvetica, sans-serif;
	float:left;
	border: 1px solid #000;
	margin: 40px 0px 20px 40px;
} 
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight:bold;
}
#navigation li {
	border-bottom: 1px solid #000;
}
#navigation li a:link, #navigation li a:visited  {
	display: block;
	padding: 5px 5px 5px 0.5em;
	background-color: #FFCC66;
	color: #000;
	text-decoration: none;
}
#navigation li a:hover {
	background-color: #000;
	color: #fff;
}
#navigation ul ul {
	font-weight:normal;
}
#navigation ul ul li {
	border-bottom: 1px solid #000;
	margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
	background-color: #ed9f04; /*drop down color*/
	color: #000;
}
#navigation ul ul a:hover {
	background-color: #717170;
	color: #FFFFFF;
} 
#mainContent { 
	margin: 0 0 0 230px; 
	padding: 0 20px 20px;
} 
#address {
	text-align:center;
	font-size:.60em;
	padding-top:20px;
	}
.fltrt {
	float: right;
	margin-left: 20px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style><!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
#navigation { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
#navigation { padding-top: 30px; }
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head> 
<body class="twoColFixLt"> 
<div id="container">
  <div id="navigation">
  <img src="images/logo-150c.gif" width="150" height="123" align="This is logo" />
	<UL>
    <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/breakthrough.html">Breakthrough</A>
      <UL>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/breakthrough_se1000.html">-SE-1000 Specs</A></LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/breakthrough_chainlube.html">-Synthetic Chain Lube</A></LI>
      </UL>
    </LI>
    <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/additives.html">Additives</A>
    <UL>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/additives_enforcer.html">-Enforcer II</A></LI>
     </UL>
    </LI>
    <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/oils.html">Oils</A>
    <UL>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/oils_motor.html">-Motor Oil</A></LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/oils_racing.html">-50W Racing Oil</A></LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/oils_gear.html">-Gear Oil</A></LI>
      </UL>
    </LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/lubricants.html">Lubricants</A>
    <UL>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/lubricants_industrial.html">-Synthetic Industrial</A></LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/lubricants_tacky.html">-Tacky Chain Lube</A></LI>
      </UL>
    </LI>
            <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/grease.html">Grease</A>
    <UL>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/grease_se100.html">-SE-100</A></LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/grease_se1000.html">-SE-1000</A></LI>
      </UL>
    </LI>
                <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/hydraulic.html">Hydraulic Fluid</A>
    <UL>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/hydraulic_supreme.html">-Supreme Torque</A></LI>
        <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/hydraulic_powershift.html">-Powershift TO-4</A></LI>
      </UL>
    </LI>
    <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/testimonials.html">Testimonials</A></LI>
    <LI><A href="./Steward Enterprise Inc Oil - Appleton, WI_files/Steward Enterprise Inc Oil - Appleton, WI.htm">Contact Us</A></LI>
      <LI><A href="http://www.nsitedesigns.com/nsitedesigns/steward/index.html">Home</A></LI>
  </UL>
  </div>
  
  <div id="mainContent">
  <div id="header">
  <h1>THIS IS TESTING COMPANY</h1>
  </div>
    <h1> Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>Content Heading Testing</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <p>
      <!-- end #mainContent -->
    </p>
    <div id="address">
    Steward Enterprise  | 
   31 Apache Ct. | 
   Appleton, WI  54911 | 
   (920) 734-4146 <BR>
   © 2002-2009 Steward Enterprise Inc. <BR>
   
    </div>
    </div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  <br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>

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:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:

Select all Open in new window

Question

nav extends beyond body content

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Cascading Style Sheets (CSS)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press