Html 试图使网站具有移动响应能力

嗨，我有一个网站，我正试图使移动响应，但由于某种原因，我的网站右泛部分突然出现下降。页眉变成了页脚

原来是这样的

我在学习教程时弄乱了Css 这是密码

    /* CSS Document */
   body{padding:0px; margin:0px; background:#fff; color:#848484; font:11px/14px Tahoma,   Geneva, sans-serif}
   div, p, ul, h2, h3, h4, img, form, input, textarea{padding:0px; margin:0px; border:0}
  ul{list-style-type:none;}

   .clear {clear: both; margin: 0px; height:0}

   p a{ font:11px/14px Tahoma, Geneva, sans-serif; color:#17afdb; text-decoration:none;}
   p a:hover{ color:#fe0600; text-decoration:none;}

  .headline{font:11px/14px Tahoma, Geneva, sans-serif; color:#fe0600; font-weight:bold}

  #container{width:775px; margin:0 auto 0 auto; background:url(../images/b_body.jpg) 0 0 no-repeat}
  #incontainer{width:90%; margin:0 auto 0 auto;}


   /* HEADER */

 #headerPan{width:100%; height:337px; position:relative;          background:url(../images/header.png) 0 0 no-repeat; margin-bottom:10px}

  #headerPan img#logo{position:absolute; top:156px; left:434px}

   #headerPan ul.menu{position:absolute; top:28px; left:24px; width:95.84664536741214%; height:27px}
  #headerPan ul.menu li{float:left; height:27px;  margin-right:40px }
  #headerPan ul.menu li a{height:27px;  display:block; text-indent:-20000px; }
  #headerPan ul.menu li a:hover{height:27px; }

 #headerPan ul.menu li.b01 a{ width:13.25878594249201%;  background:url(../images/btn_1.png) 0 0 no-repeat; }
 #headerPan ul.menu li.b01 a:hover{ width:13.25878594249201%;  background:url(../images/btn_1_over.png) 0 0 no-repeat;}

 #headerPan ul.menu li.b02 a{ width:11.34185303514377%;   background:url(../images/btn_2.png) 0 0  no-repeat; }
 #headerPan ul.menu li.b02 a:hover{ width:11.34185303514377%;  background:url(../images/btn_2_over.png) 0 0  no-repeat;}

 #headerPan ul.menu li.b03 a{ width:8.626198083067093%;  background:url(../images/btn_3.png) 0 0  no-repeat; }
 #headerPan ul.menu li.b03 a:hover{ width:8.626198083067093%;  background:url(../images/btn_3_over.png) 0 0  no-repeat;}

 #headerPan ul.menu li.b04 a{ width:18.05111821086262%;  background:url(../images/btn_4.png) 0 0  no-repeat; }
 #headerPan ul.menu li.b04 a:hover{ width:18.05111821086262%;  background:url(../images/btn_4_over.png) 0 0  no-repeat;}

 #headerPan ul.menu li.b05{margin-right:0 }
 #headerPan ul.menu li.b05 a{ width:11.82108626198083%;  background:url(../images/btn_5.png) 0 0  no-repeat; }
 #headerPan ul.menu li.b05 a:hover{ width:11.82108626198083%;  background:url(../images/btn_5_over.png) 0 0  no-repeat;}

  /* CONTENT */

 #contentPan{width:100%; position:relative; background:#fff; padding-top:20px;}
 #contentPanPages{padding:200px 0; text-align:center; background:#fff;}

 #leftPan{width:57.50798722044728&; float:left; margin:0 34px 0 2.236421725239617%;} 
 #rightPan{width:32.74760383386581%; float:left;} 

 #welcome{width:57.50798722044728%; margin:0 0 32px 0;}
 #welcome h2{width:57.50798722044728%; height:62px; background:url(../images/h_welcome.png) 0 0 no-repeat; margin-bottom:10px}
 #welcome img{float:left; margin-right:15px; max-width:100&;}

 #next_events{width:57.50798722044728%;}
 #next_events h2{width:57.50798722044728%; height:32px; background:url(../images/h_events.png) 0 0 no-repeat; margin-bottom:10px}
 #next_events img{float:left; margin-right:15px;}

 #history{width:32.74760383386581%; margin:0 0 0 0;}
 #history h2{width:32.74760383386581%; height:34px; background:url(../images/h_history.png) 0 0 no-repeat; margin-bottom:10px}
  #history p.maintext{margin-bottom: 12px; padding-bottom:12px; border-bottom:#a9a9a9 1px dotted }
  #history img{float:left; margin-right:10px;


 /* FOOTER */
 #footerPan{width:626px; height:63px; margin:0 auto; background:url(../images/b_footer.jpg) 0 0 no-repeat}
 #footerPan p{padding: 18px 0 0 0; font:10px/14px Tahoma, Geneva, sans-serif; font-weight:normal; color:#848484; text-align:center}
 #footerPan p span{ font:10px/14px Tahoma, Geneva, sans-serif; color:#848484;}
 #footerPan p a{ font:10px/14px Tahoma, Geneva, sans-serif; color:#848484; text-decoration:none; padding: 0 3px; font-style:normal; font-weight:normal; text-transform:uppercase }
 #footerPan p a:hover{ font:10px/14px Tahoma, Geneva, sans-serif; text-decoration:underline; font-style:normal; font-weight:normal; text-transform:uppercase}

这是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">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Sky Diving Club</title>

 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="pngfix.js"></script>

 </head>

   <body>

  <div id="container">

  <div id="incontainer">


  <div id="headerPan">

      <ul class="menu">
        <li class="b01"><a href="index.html" title="home">home</a></li>
      <li class="b02"><a href="about.html" title="about me">about us</a></li>
      <li class="b03"><a href="events.html" title="events">events</a></li>
      <li class="b04"><a href="gallery.html" title="photo gallery">photo gallery</a></li>
       <li class="b05"><a href="contacts.html" title="contacts">contacts</a></li>
     </ul> 

            <img src="images/logo.png" alt="" name="logo" width="154" height="96" id="logo" />

 </div>
     <div id="contentPan">

      <div id="leftPan">

      <div id="welcome">
    <h2></h2>

   <img src="images/img_welcome.jpg" width="135" height="87" alt="" />

    <p><span class="headline">Lorem ipsum dolor sit amet, consectetuer lobortis purus    vel </span><br />
      Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in   ante. Mauris tincidunt, quam ac porta viverra, turpis sapien <a href="#">| more</a></p>
   <div class="clear"></div>
   </div>

   <div id="next_events">
   <h2></h2>

  <img src="images/img_events.jpg" width="135" height="87" alt="" />

  <p><span class="headline">Lorem ipsum dolor sit amet, consectetuer lobortis purus vel   </span><br />
  Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Mauris tincidunt, quam ac porta viverra, turpis sapien <a href="#">| more</a></p>
  <div class="clear" style="height:15px"></div>

    <p class="maintext">Mauris tincidunt, quam ac porta viverra, turpis sapien egestas mauris, et suscipit nulla orci sed odio. In ac sem Mauris tincidunt</p>

  </div>


  </div>


   <div id="rightPan">

   <div id="history">
   <h2></h2>
   <p class="maintext">Mauris tincidunt, quam ac porta viverra, turpis sapien egestas mauris, et suscipit nulla orci sed odio. In ac sem Mauris tincidunt, quam ac porta viverra</p>

  <img src="images/img_history.jpg" alt="" width="66" height="66" />
  <p><span class="headline">Donec lobortis </span><br />
    Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. Nam eu </p>

  <div class="clear" style="height:15px"></div>

   <img src="images/img_history-03.jpg" alt="" width="66" height="66" />
   <p><span class="headline">Donec lobortis </span><br />
    Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. Nam eu </p>

  <div class="clear" style="height:15px"></div>

   <img src="images/img_history-05.jpg" alt="" width="66" height="66" />

    <p><span class="headline">Donec lobortis </span><br />
    Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. Nam eu </p>

     <div class="clear" style="height:15px"></div>



      </div>

   </div>

     <div class="clear" style="height:20px"></div>


     </div>
      <div id="footerPan">

      <p><a href="index.html">home</a> | <a href="about.html">about US</a> | <a     href="events.html">events</a> | <a href="gallery.html">gallery</a> | <a href="contacts.html">contacts</a><br/>
     <span>Copyright &copy; Sky Diving Club. All rights reserved.</span></p>

     </div>


     </div>


      </div>

      </body>
     </html>

跳伞俱乐部







同侧阴唇，下睑下垂

努克·劳里特·拉西尼亚·努克。在同侧索氏体中。内翻前庭。赌注中的整数。毛里斯·廷西登，维韦拉港码头，图尔皮斯萨皮恩

同侧阴唇，下睑下垂

努克·劳里特·拉西尼亚·努克。在同侧索氏体中。内翻前庭。赌注中的整数。毛里斯·廷西登，维韦拉港码头，图尔皮斯萨皮恩

Mauris tincidunt，quam ac porta viverra，turpis sapien egestas Mauris，以及未经批准的odio。在ac sem中，Mauris tincidunt
Mauris tincidunt，quam ac porta viverra，turpis sapien egestas Mauris，以及未经批准的odio。在ac sem Mauris tincidunt，quam ac porta viverra
多奈克·洛博蒂斯

Lorem ipsum dolor sit amet，消费者精英。南欧

多奈克·洛博蒂斯

Lorem ipsum dolor sit amet，消费者精英。南欧

多奈克·洛博蒂斯

Lorem ipsum dolor sit amet，消费者精英。南欧

| | | |

版权及副本；跳伞俱乐部。版权所有

---

有什么想法吗？

在

#leftPan

的CSS定义中，

宽度的单位似乎有输入错误：
宽度：57.50798722044728&。也许你的意思是宽度：57.50798722044728%？
#welcome img
max width
的情况也是如此。哦，好眼力，这确实解决了左平移出现在底部的问题，但我仍然存在页眉在页脚所在位置的问题，左平移似乎被一堵文本墙压扁的问题。有可能创建一个演示该问题的页面吗？因为你的外部文件都是相对的URL，所以它是相对的。这是我在页面顶部看到的标题。“变成页脚”是什么意思？