css: zoooming-out inside the browser moves rightmost floated div below other divs
Posted
by
John Sonderson
on Pro Webmasters
See other posts from Pro Webmasters
or by John Sonderson
Published on 2013-10-17T22:14:16Z
Indexed on
2013/10/17
22:21 UTC
Read the original article
Hit count: 437
I am seeing something strange in both firefox and chrome when I increase the zoom level inside these browsers, although I see nothing wrong with my CSS... I am hoping someone on this group will be able to help. Here is the whole story:
I have a right-floated top-level div containing three right-floated right. The three inner divs have all box-model measurements in pixels which add up to the width of the enclosing container. Everything looks fine when the browser size is 100%, but when I start making the browser smaller with CTRL+scrollwheel or CTRL+minus the rightmost margin shrinks down too fast and eventually becomes zero, forcing my rightmost floated inner div to fall down below the other two!
I can't make sense out of this, almost seems like some integer division is being performed incorrectly in the browser code, but alas firefox and chrome both display the same result.
Here is the example (just zoom out with CTRL-minus to see what I mean):
Click Here to View What I Mean on Example Site
Just to narrow things down a bit, the tags of interest are the following:
div#mainContent div#contentLeft div#contentCenter div#contentRight
I've searched stackoverflow for an answer and found the following posts which seem related to my question but was not able to apply them to the problem I am experiencing:
http:// stackoverflow.com/questions/6955313/div-moves-incorrectly-on-browser-resize
http:// stackoverflow.com/questions/18246882/divs-move-when-resizing-page
http:// stackoverflow.com/questions/17637231/moving-an-image-when-browser-resizes
http:// stackoverflow.com/questions/5316380/how-to-stop-divs-moving-when-the-browser-is-resized
I've duplicated the html and css code below for your convenience:
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pinco</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<a href="http://pinco.com">
<img class="logo" src="images/PincoLogo5.png" alt="Pinco" />
</a>
</div>
<div class="titolo">
<h1>Benvenuti!</h1>
<h2>Siete arrivati al sito pinco.</h2>
</div>
<nav>
<ul class="menu">
<li><a href="#">Menù Qui</a></li>
<li><a href="#">Menù Quo</a></li>
<li><a href="#">Menù Qua</a></li>
</ul>
</nav>
</header>
<div id="mainContent">
<div id="contentLeft">
<section>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempor turpis est, nec varius est pharetra scelerisque. Sed eu pellentesque purus, at cursus nisi. In bibendum tristique nunc eu mattis. Nulla pretium tincidunt ipsum, non imperdiet metus tincidunt ac. In et lobortis elit, nec lobortis purus. Cras ac viverra risus. Proin dapibus tortor justo, a vulputate ipsum lacinia sed. In hac habitasse platea dictumst. Phasellus sit amet malesuada velit. Fusce diam neque, cursus id dui ac, blandit vehicula tortor.
Phasellus interdum ipsum eu leo condimentum, in dignissim erat tincidunt. Ut fermentum consectetur tellus, dignissim volutpat orci suscipit ac. Praesent scelerisque urna metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis pulvinar, sem a sodales eleifend, odio elit blandit risus, a dapibus ligula orci non augue. Nullam vitae cursus tortor, eget malesuada lectus. Nulla facilisi. Cras pharetra nisi sit amet orci dignissim, a eleifend odio hendrerit.
</p>
</article>
</section>
</div>
<div id="contentCenter">
<section>
<article>
<p>
Maecenas vitae purus at orci euismod pretium. Nam gravida gravida bibendum. Donec nec dolor vel magna consequat laoreet in a urna. Phasellus cursus ultrices lorem ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus purus felis, ornare quis ante vel, commodo scelerisque tortor. Integer vel facilisis mauris.
</p>
<img src="images/auto1.jpg" width="272" height="272" />
<p>
In urna purus, fringilla a urna a, ultrices convallis orci. Duis mattis sit amet leo sed luctus. Donec nec sem non nunc mattis semper quis vitae enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum porta quam, vel lobortis enim bibendum et. Donec iaculis tortor id metus interdum, hendrerit tincidunt orci tempor. Sed dignissim cursus mattis.
</p>
</article>
</section>
</div>
<div id="contentRight">
<section>
<article>
<img src="images/auto2.jpg" width="272" height="272" />
<img src="images/auto3.jpg" width="272" height="272" />
<p>
Cras eu quam lobortis, sodales felis ultricies, rhoncus neque. Aenean nisi eros, blandit ac lacus sit amet, vulputate sodales mi. Nunc eget purus ultricies, aliquam quam sit amet, porttitor velit. In imperdiet justo in quam tristique, eget semper nisi pellentesque. Cras fringilla eros enim, in euismod nisl imperdiet ac.
Fusce tempor justo vitae faucibus luctus.
</p>
</article>
</section>
</div>
</div>
<footer>
<div class="footerText">
<p>
Copyright © Pinco
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Fusce ornare turpis orci, nec egestas leo feugiat ac.
<br />Morbi eget sem facilisis, laoreet erat ut, tristique odio. Proin sollicitudin quis nisi id consequat.
</p>
</div>
<div class="footerLogo">
<img class="footerLogo" src="images/auto4.jpg" width="80" height="80" />
</div>
</footer>
</div>
</body>
</html>
and here is the CSS:
/* CSS Document */
* { margin: 0; border: 0; padding: 0; }
body { background: #8B0000; /* darkred */; }
body { margin: 0; border: 0; padding: 0; }
div#wrapper { margin: 0 auto; width: 960px; height: 100%; background: #FFC0CB /* pink */; }
header { position: relative; background: #005b97; height: 140px; }
header div.logo { float: left; width: 360px; height: 140px; }
header div.logo img.logo { width: 360px; height: 140px; }
header div.titolo { float: left; padding: 12px 0 0 35px; color: black; }
header div.titolo h1 { font-size: 36px; font-weight: bold; }
header div.titolo h2 { font-size: 24px; font-style: italic; font-weight: bold; color: white;}
header nav { position: absolute; right: 0; bottom: 0; }
header ul.menu { background: black; }
header ul.menu li { display: inline-block; padding: 3px 15px; font-weight: bold; }
div#mainContent { float: left; width: 100%; /* width: 960px; *//* height: 860px; */ padding: 30px 0; text-align: justify; }
div#mainContent img { margin: 12px 0; }
div#contentLeft { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
div#contentCenter { height: 900px; float: left; margin-left: 12px; border: 1px solid transparent; padding: 15px; width: 272px; background: #E00; }
div#contentRight { height: 900px; float: left; margin-left: 12px; border: 1px solid black; padding: 15px; width: 272px; background: #ccc; }
footer { clear: both; padding: 12px; background: #306; color: white; height: 80px; font-style: italic; font-weight: bold; }
footer div.footerText { float: left; }
footer div.footerLogo { float: right; }
a { color: white; text-decoration: none; }
Thanks.
© Pro Webmasters or respective owner
