사이드 바가 축소되어 축소됩니다.

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

당신이 확대를 수용하려는 경우, 당신은 브라우저에게 약간의 픽셀 여유를 줄 필요가있다. 예를 들어 - 1 픽셀 경계선이 있고 축소하는 경우 해당 경계선은 여전히 ​​화면에서 1 픽셀이어야하지만 컨테이너는 몇 픽셀 더 작을 수 있습니다. 정확한 픽셀 값으로 너비와 게재 위치를 계산하는 경우 브라우저는 경련을 수용하기 위해 위치를 조정해야합니다.

상황에 따라 너비가 초과되는 것은 border-right: 1px solid #EAE9E6;입니다.