Printing webpage changes layout of 2 divs.

Samuel235 · 03-16-2013, 04:53 PM

Hi guys, i have just finished coding my home page, i have gone to print it out and on the print preview two divs have swapped positioning.

I have attached the images, if you look at the 'view all' button and the Copyright div with the email link in, they have swapped places.

Any help or ANYTHING that shines a light onto this situation would be great!

I want the view all button to be first then the email link underneath.

Thanks, Sam.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>RikCatlow.co.uk</title>
		<link rel="stylesheet" type="text/css" href="main.css" />
	</head>
	<body>
		<div id="container">
			<div id="hdr">
				<a href="index.html"><img class="logo" src="images/logo.png" alt="Rik Catlow"/></a>
			</div>
			<div id="nav">
				<ul>
					<li id="home" class="selected"><a href="index.html"><p>HOME</p></a></li>
					<li id="process"><a href="process.html">PROCESS</a></li>
					<li id="about"><a href="about.html">ABOUT</a></li>
				</ul>
			</div>
			<p class="intro">My name is Rik Catlow. I'm a designer & artist originally from Secaucus, NJ, but now live in beautiful Charlotte, NC. Below is recent work that I have for sale.</p>
			<div id="forsalecontent">
				<ul>
					<li><a href="https://www.etsy.com/listing/111310916/grrrl"><img src="images/1.jpg"/><h4>GRRR!</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/88901152/workers"><img src="images/2.jpg"/><h4>Workers</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/16346148/howling"><img src="images/3.jpg"/><h4>Howling</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/19619972/woozy"><img src="images/4.jpg"/><h4>Woozy</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/53287681/push"><img src="images/5.jpg"/><h4>Push</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/54992568/opening"><img src="images/6.jpg"/><h4>Opening</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/113921204/think"><img src="images/7.jpg"/><h4>Think</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/9680726/regenerated"><img src="images/8.jpg"/><h4>Regenerated</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/71868448/wish"><img src="images/9.jpg"/><h4>Wish</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/111310916/grrrl"><img src="images/1.jpg"/><h4>GRRR!</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/88901152/workers"><img src="images/2.jpg"/><h4>Workers</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/16346148/howling"><img src="images/3.jpg"/><h4>Howling</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/19619972/woozy"><img src="images/4.jpg"/><h4>Woozy</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/53287681/push"><img src="images/5.jpg"/><h4>Push</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/54992568/opening"><img src="images/6.jpg"/><h4>Opening</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/113921204/think"><img src="images/7.jpg"/><h4>Think</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/9680726/regenerated"><img src="images/8.jpg"/><h4>Regenerated</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/listing/71868448/wish"><img src="images/9.jpg"/><h4>Wish</h4><p>$100<span>USD</span></p></a></li>
					<li><a href="https://www.etsy.com/rikcat" class="viewallwidebutton">View All</a></li>
				</ul>
			</div>
			<div id="ftr">
				&copy;2012 Rik Catlow - <a href="mailto:rik.catlow@gmail.co.uk">rik.catlow@gmail.co.uk</a>
			</div>
		</div>
	</body>
</html>

CSS

Code:

* {
	padding: 0;
	margin: 0;
}

img{border: 0;}

body{
	text-align: center;
	font-family: helvetica, arial;
	font-size: x-large;
}

#container{
	width: 740px;
	margin: 20px auto 0;
}

#hdr{

}

img.logo {
	padding-bottom: 30px;
}

#nav{
	border-bottom: solid 1px #999;
}

#nav ul{
	list-style-type: none;
}

#nav ul li{
	display: inline-block;
	margin-left: 20px;
	height: 40px;
	line-height: 37px; /****** MODIFY TO ADJUST GAP ABOVE UNDERLINE ******/
}

#nav ul li:first-child{margin-left: 0px;}

#nav ul li#home { margin-left: 13px;}
#nav ul li#process {}
#nav ul li#about {}
#nav ul li.selected p{border-bottom: 3px solid #999; font-weight: bold;}

#nav ul li a{
	text-decoration: none;
	display: block;
	color: black;
}

#nav ul li a:hover{
	color: #999;
}

.intro{
	text-align: left;
	font-size: 90%;
	line-height: 25pt;
	padding: 40px 0;
}

#forsalecontent{
	font-size: 80%;
	padding-bottom: 10px;
	width: 714px;
	margin: 0 auto;
	overflow: auto;
}

#forsalecontent h4{margin-left: 7px; text-align: left; font-size: 95%;}
#forsalecontent p{margin-left: 7px; text-align: left; font-size: 80%}
#forsalecontent span{color: grey; font-size: 75%}
#forsalecontent ul li img {margin-top: 7px;}
#forsalecontent ul{list-style-type: none;}
#forsalecontent ul li{}
#forsalecontent ul li a{
	text-decoration: none;
	color: black;
	margin: 0 3px 9px;
	display: block;
	border: 1px solid #ddd;
	border-radius: 2px;
	width: 230px;
	height: 210px;
	float: left;
}
#forsalecontent ul li a:hover{box-shadow: 0 1px 3px #ddd; border: 1px solid #bbb;}
#forsalecontent ul li a.viewallwidebutton{width: 706px; height: auto; margin-top: 15px; line-height: 40px;}

#ftr{
	color: grey;
	font-size: 75%;
	padding-bottom: 30px;
}

#ftr a{
	color: grey;
	text-decoration: none;
}

#ftr a:hover{text-decoration: underline;}