I have a problem with my website. When I zoom out, the sidebars move below my main content. Here is the website.
Here is my code,
<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 & 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 -->
If you want to accommodate for zooming, you need to give the browser some pixel leeway. For example – if you have a 1px border and you zoom out, those border still have to be 1px on the screen, but the container is likely several pixels fewer. If you are calculating widths and placements on an exact pixel value, the browser will have to adjust positioning to accommodate for the cramping.
For your situation, it’s the
border-right: 1px solid #EAE9E6;that is causing the excess width.