侧栏在缩小时向下移动

Question

我的网站出现问题。当我缩小时，侧边栏移动到我的主要内容下面。这里是website。 这里是我的代码，

<div id="content_main" > 
        <div id="content_center"> 
          <div id="news_spotlight_container"> 

            <div class="news"> 
            <h2 style=" border-bottom: 6px solid #000000; letter-spacing: 2px;color: #565347; ">WELCOME</h2> 
              <div class="newsitem"> 
              <br class="clear"> 
                <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Message From Chair Person</a></h3> 
                  <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou. </p> 
              </div> 

              <br class="clear"> 
              <div class="newsitem"> 
                <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Research</a></h3> 
                  <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou.</p> 
              </div> 
              <br class="clear"> 
              <div class="newsitem"> 
                <h3><a href="#" ><img src="CIS_files/cis_view.png" class="image_news" alt="[ Read Story: X-ray laser ]">Extra Curricular Activities</a></h3> 
                  <p>Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou is si si sissi iss is is iss i students.Thankyou students.Thankyou students.Thankyou students.Thankyou students.Thankyou.</p> 
              </div> 
              <br class="clear"> 
              </div> <!-- End news --> 

              <div id="more-stories"> 
                <div> 
                  <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Quick Links</h2> 
                </div> 
                <ul id="newslinks"> 
                  <li><a href="#">BE Time Table</a></li> 
                  <li><a href="#">Lab Workbooks</a></li> 
                  <li><a href="#">Final Year Projects</a></li> 
                  <li><a href="#">Contact Us</a></li> 
                </ul> 

              </div> 
               <div id="more-stories"> 
                <div> 
                  <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Hall of Fame</h2> 
                </div> 
                <ul id="newslinks"> 
                  <li><a href="#">Shams Uddin</a></li> 
                  <li><a href="#">Fahad Qasim</a></li> 
                  <li><a href="#">Zain Akhtar</a></li> 
                </ul> 

              </div> 
              <div id="more-stories"> 

                <div> 
                  <h2 style="border-bottom: 6px solid #000000; letter-spacing: 2px; margin-bottom: 10px;">Events</h2> 
                </div> 
                <ul id="newslinks"> 
                  <li><a href="#">TechElete</a></li> 
                  <li><a href="#">Vision</a></li> 
                  <li><a href="#">Poster Competition</a></li> 
                  <li><a href="#">Cache</a></li> 
                </ul> 
              </div> 

              <p><!-- End more-stories --> 
               <br class="clear"> 
              </p> 
              <div style="width:100%; border-right:0px;" class="news" > 
                 <h2 style=" border-bottom: 6px solid #000000 ; 
                     letter-spacing: 2px; 
                     "> 
                    <a href="#">About CISE</a> 
                 </h2> 
                 <br class="clear"> 
                 <img class="image_news" src="CIS_files/cis_view.png" alt="cis view" /> 
             <p>The department of Computer Information &amp; Systems Engineering (CISE) was established in July 1997. The department has been a pioneer at NED University in many respects. We have set trends that have been followed by many other departments. <br><br>Currently, the department offers a four year bachelors program in morning and masters program in morning as well in evening.</p> 

           </div> 
          </div> <!-- End news_spotlight_container --> 
          <br class="clear"> 
        </div><!-- End content_center --> 
      </div> <!-- End content_main --> 

Answer 1

如果你想以适应缩放，你需要给浏览器的一些像素的回旋余地。例如 - 如果您有1px的边框并缩小，屏幕上的边框仍然必须为1px，但容器可能少了几个像素。如果您正在计算精确像素值的宽度和位置，则浏览器必须调整位置以适应抽筋。

对于你的情况，这是导致超出宽度的border-right: 1px solid #EAE9E6;。