A div moving

HTML & CSS
1

Hi.

Take a look at http://www.kwpwebdesign.se

If you zoom out as much as you can you can see that a column is moving, that’s #col2.
How do I prevent that so it stays in the same position?

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>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/demo.css"></head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/anythingslider.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\\/script>')</script>

	<script>
		// DOM Ready
		$(function(){
			$('#slider').anythingSlider();
		});
	</script>

	<script src="js/jquery.anythingslider.js"></script>



<body>


<div id="upper">

<div id="bgupper"><div id="iupper"><img id="logo" src="images/logo.png" width="142" height="126" /></div></div>




</div>

<div id="header-wrapper">
  <div class="wrapper">
		  <ul class="nav">
		    <li class="navigation"><a href="#home">WBM-Fleninge</a></li>
				<li class="navigation"><a href="#about">ATV</a></li>
				<li class="navigation"><a href="#blog">Sortiment</a></li>

				<li class="navigation"><a href="#credits">AC</a></li>
                <li class="navigation"><a href="#credits">Finanser</a></li>
                   <li class="navigation"><a href="#credits">Begagnat</a> </li>

                      <li class="navigation"><a href="#credits">Service</a></li>

                <li class="navigation"><a href="#credits">Kartor</a></li>

		  </ul>
  </div>
</div>



<div id="wrapper">


<div id="slider1">
<ul id="slider">


	<li><img src="images/Test1.png" width="980" height="300px" /></li>
		<li><img src="images/Test.png" width="980" height="300px" /></li>

            	<li><img src="images/Test2.png" width="980" height="300px" /></li>


</ul></div>

<div id="om">

<div id="col1">

<h1 class="inledning">Välkommen till WBM!</h1><br /><br />

<p class="text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,<br /><br /> id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br />
  <br />
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.<br /><br /> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. <br /><br />Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias<br /><br />
consequatur aut perferendis doloribus asperiores repellat.</p>

 <div class="pics"></div>
  <div class="pics2"></div>
   <div class="pics3"></div>

 </div>





<div id="col2">


<div id="öppettider">
<p class="oppet">Öppettider</p><br />

<p class="text">Mån-fre: 11:00-18:00<br><br>
Telefon: 0521-25 52 52<br><br>
Fax: 0521-25 52 57
</p>

</div>



<img id="ar" src="images/samarbete_40ar.png" width="200" height="150" />
<div id="öppettider">


  <p class="text">
</p>

</div>

</div>
</div>

</div>


</div>


<div id="footer">

<div id="footeri">
<div class="footercol"><p class="överskrift">KONTAKT</p>

<p class="para">Mobil. 070 123 123 123<br />
  <br />
E-post: abm-fleninge@hotmail.com<br />
<br />
Kontaktperson Abm Fleninge<br />
<br />
</p><br />





</div>
<div class="footercol">
  <p class="överskrift">HITTA OSS</p>

<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.se/maps?f=q&amp;source=s_q&amp;hl=sv&amp;geocode=&amp;q=Fleningev%C3%A4gen,+Helsingborg&amp;aq=0&amp;oq=FLENINGE&amp;sll=61.606396,21.225586&amp;sspn=37.146142,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Fleningev%C3%A4gen,+260+35+%C3%96d%C3%A5kra,+Sk%C3%A5ne+l%C3%A4n&amp;t=m&amp;z=14&amp;ll=56.108623,12.79027&amp;output=embed"></iframe><br />
</div>
<div class="footercol">
 <p class="överskrift">SORTIMENT</p>

 <img src="images/Untitled-3 copy.png" width="272" height="167" />




 </div>


</div>




</div>



</body>
</html>

CSS:

body {background-color:#000017}

#wrapper {width:980px; margin:0 auto; margin-top:6px;  }

#upper {height:200px;background-color:#000000; margin:0 auto;}
#iupper {width:980px; height:200px; margin:0 auto; }

#bgupper { height:200px; margin:0 auto; background-image:url(../images/Slider1.jpg) }

#slider1 {height:300px; width:980px; clear:both  }

#col1 {
	float:left;
	width:680px;
	margin-top: 30px;
	padding-right: 30px;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #333;


}

#ar {display:block; margin-left:30px; margin-top:30px; }


#öppettider {width:238px; margin-left:30px; }

#random {width:238px; margin-left:30px; margin-top:40px;  }

.oppet { color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; }

#om {width:980px; overflow:hidden }

.överskrift {color:#000; font-size:25px; text-transform:uppercase; font-family:oswald; font-weight:300; margin-top:20px; margin-bottom:20px;}

#col2 {
	float:left;
	width:268px;
	margin-top:50px;
	float:right
	

}

#logo {margin-top:30px;  margin-left:20px;}
.inledning {color:#fff; font-weight:bold; font-size:30px; font-family:Open Sans; margin-top:20px; }

.text {color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size:14px;  }

#footer {
	height:250px;
	background-color:#FFFFFF;
	margin-top:70px;
	border-top-width: 7px;
	border-top-style: solid;
	border-top-color: #666666;
	clear:both
}

#footeri { width:980px; height:250px;  margin: 0 auto; }

.footercol {
	float:left;
	height:250px;
	width:315px;
}

.pics { width:210px; height:170px; float:left;margin-top:30px; background-image:url(../images/mini1.jpg)}
.pics2 { width:210px; height:170px;  float:left;margin-top:30px; margin-left:25px; background-image:url(../images/mini2.jpg) }
.pics3 { width:210px; height:170px;  float:right ;margin-top:30px; background-image:url(../images/mini3.jpg) }




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
2

I’m not seeing that happen. Can you post pictures? One of it zoomed out preferably (showing the issue). I zoomed all the way out (as far as Chrome goes) and didn’t see anything bad.

3

Look here: http://i.imgur.com/3dUuA.png

4

I use Firefox and normally have it set to zoom text only, which doesn’t cause any problem. If I set it to zoom everything then yes, at maximum zoom out I see the same issue. However, the text is utterly unreadable at that size. I can’t imagine any circumstances in which somebody would zoom out to that extent and still be trying to use the site, so I wouldn’t worry about it. Just my opinion.

5

True, but I gotta be doing something wrong, and I hate doing a site thats not as it should really. But I think ill let it go, since nobody basically will zoom out that much.

But if somebody can recognize the problem, please tell me. :slight_smile: