yazılar tasarımın dışına çıkıyor

<div id="container">
   <div id="header">
   <div id="headtop">
      <a href="#">Site Map</a> <a href="#">Contact</a> <a href="#">About</a> 
   </div>
   <div id="headbottom">
      <h1>Web<span style="color:#FF6600;">Max-1</span></h1>
      <h2>Your website slogan goes over here.</h2>
   </div>
   </div>
   <div id="menu">
    <ul>
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Support</a></li>
    </ul>
      <div class="search">
      <form method="post" action="#">
          <input class="inputbutton" type="button" value="Search" />
          <input class="inputtext" type="text" />
      </form>   
      </div>
     </div>
   <div id="content">
      <div id="leftcontent">
       
        <div class="navigation">
         <div class="navhead">Navigation</div>
         <ul class="navmenu">
           <li><a href="#">Nav Link 1</a></li>
           <li><a href="#">Nav Link 2</a></li>
           <li><a href="#">Nav Link 3</a></li>
           <li><a href="#">Nav Link 4</a></li>
           <li><a href="#">Nav Link 5</a></li>
         </ul>
        </div>
         
          <div class="navigation">
         <div class="navhead">Another One</div>
         <ul class="navmenu">
           <li><a href="#">Nav Link 1</a></li>
           <li><a href="#">Nav Link 2</a></li>
           <li><a href="#">Nav Link 3</a></li>
           <li><a href="#">Nav Link 4</a></li>
           <li><a href="#">Nav Link 5</a></li>
           <li><a href="#">Nav Link 1</a></li>
           <li><a href="#">Nav Link 2</a></li>
           <li><a href="#">Nav Link 3</a></li>
           <li><a href="#">Nav Link 4</a></li>
           <li><a href="#">Nav Link 5</a></li>
         </ul>
        </div>
         
          <div class="navigation">
         <div class="navhead">Image Align</div>
         <p><span class="left">
            <img src="image.gif" alt="Lorem ipsum" width="60" height="60" /></span> Image is having left alignment. Lorem ipsum dolor sit amet, consectetur
           adipisicing elit.Lorem ipsum dolor amet, consectetur adipisicing elit.</p>
        </div>
         
          <div class="navigation">
         <div class="navhead">Image Align</div>
         <p><span class="right">
            <img src="image.gif" alt="Lorem ipsum" width="60" height="60" /></span> Image is having right alignment. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor amet, consectetur adipisicing elit.</p>
        </div>
         
          <div class="navigation">
         <div class="navhead">Big Banner</div>
         <p>
         <img src="image.gif" alt="Lorem ipsum" width="140" height="300" />
         Above image is streched but you can put a normal image of maximum 140px width an height to your requirements.
         </p>
        </div>
         
      </div>
      
      <div id="rightcontent">
 
         
            <div class="postcontent">

/div>
       </div>
   </div>
 
   <div id="footer">
   <div id="footertop">
      <h2><a href="#">Home</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | <a href="#">Rss</a> | <a href=

      "http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
      &copy; 2006 <a href="#">Your Name</a> | Design by <a href="http://www.flopsoft.co.nr" target="_blank">FlopSoft Inc.</a></h2>
   </div>
   <div id="footerbootom"></div>
   </div>
 
</div>