White Space?

[pipapir]

I'm having a problem with too much white space on the right side of my layout, and I cannot find the reason why. A friend of mine did most of the coding before she went back to school, and now isn't around to help fix it. The website can be found here: http://flowerfarmhorses.com/ffweb/ The CSS:

@font-face {	font-family: 'Garogier';	src: url('garogier.eot');	src: url('garogier.eot?#iefix') format('embedded-opentype'),		 url('garogier.woff') format('woff'),		 url('garogier.ttf') format('truetype'),		 url('garogier.svg#Garogier') format('svg');	font-weight: normal;	font-style: normal;}root { 	display: block;}body {	background: #f3f3f3;	background-image: url(../images/bg.jpg);}h1 {	color: #820024;	text-shadow: 1px 1px 1px #ffffff;	font-family: 'Garogier';	font-size: 36px;	margin: 0 0 5px 0;	font-weight: 200;}h2,h2 a:link,h2 a:active,h2 a:visited {	color: #00274c;	text-shadow: 1px 1px 1px #ffffff;	font-family: 'Garogier';	font-size: 18px;	font-weight: 200;	margin: 0 0 5px 0;	line-height: 26px;}h2 a:hover {	color: #820024;}p.garogier-maroon-medium {	color: #820024;	font-family: 'Garogier';	font-size: 24px;	padding: 0 0 5px 0;}p.garogier-navy-small {	color: #00274c;	font-family: 'Garogier';	font-size: 14px;	line-height: 20px;}p.garogier-white-medium {	font-size: 18px;	color: #ffffff;	font-family: 'Garogier';	padding: 0 0 15px 0;}p.helvetica-navy-tiny {	font-size: 12px;	color: #c8d8e8;	font-family: Helvetica;	line-height: 14px;}p.helvetica-navy-tiny a:link,p.helvetica-navy-tiny a:active,p.helvetica-navy-tiny a:visited {	color: #ffffff;	font-style: italic;}p.helvetica-navy-tiny a:hover {	border-bottom: 1px dotted #ffffff;}p.garogier-navy-medium {	font-size: 24px;	color: #00274c;	font-family: 'Garogier';	font-weight: 200;	letter-spacing: 1px;	padding: 0 0 5px;}p.helvetica-navy-small {	font-size: 12px;	font-family: Helvetica;	color: #00274c;	letter-spacing: 1px;}p.garogier-grey-medium {	font-size: 18px;	color: #c0c0c0;	font-family: 'Garogier';	font-weight: 200;	letter-spacing: 1px;	padding: 0 0 7px;}td.helvetica-grey-middle {	font-size: 12px;	font-family: Helvetica;	color: #838383;	line-height: 18px;}p.garogier-burg-medium,p.garogier-burg-medium a:link,p.garogier-burg-medium a:active,p.garogier-burg-medium a:visited {	font-size: 22px;	color: #820024;	font-family: 'Garogier';	padding: 15px 0 10px 0;}p.garogier-burg-medium a:hover {	color: #820024;}p.garogier-burg-smaller,p.garogier-burg-smaller a:link,p.garogier-burg-smaller a:active,p.garogier-burg-smaller a:visited {	font-size: 16px;	color: #820024;	font-family: 'Garogier';}p.garogier-burg-smaller a:hover {	color: #820024;}p.helvetica-grey-middle {	font-size: 12px;	font-family: Helvetica;	color: #838383;	line-height: 18px;}p.helvetica-grey-middle a:link,p.helvetica-grey-middle a:active,p.helvetica-grey-middle a:visited {	color: #00274c;	font-style: italic;}p.helvetica-grey-middle a:hover {	border-bottom: 1px dotted #e19b88;;}p.helvetica-grey-small {	font-size: 10px;	font-family: Helvetica;	color: #c0c0c0;	letter-spacing: 1px;}p.garogier-footer-navy {	font-size: 12px;	font-family: 'Garogier';	color: #bed1e4;	line-height: 18px;	padding-top: 10px;}p.small-footer-maroon {	font-size: 12px;	font-family: 'Garogier';	color: #c8d8e8;	line-height: 16px;}.border {	border: 10px solid #ffffff;	-moz-box-shadow:0px 0px 5px #c0c0c0;	-webkit-box-shadow:0px 0px 5px #c0c0c0;	box-shadow:0px 0px 5px #c0c0c0;}.wrapper {	width: 80%;	margin: 0 auto;	background: #f3f3f3;}.container {	width: 90%;		margin-left: 60px;}.wrapper2 {	width: 90%;	margin: 0 auto;}#topnav {	background: #820024;	padding: 10px 15px 10px 5px;	text-align: right;	color: #cfcedd;	font-size: 12px;	font-family: Helvetica, Arial, Verdana;}#logo {	width: 100%;	height: 75px;	margin: 25px 0 25px 0;	background: url('../images/logo.png') no-repeat 0 0;}#name {	border-left: 1px solid #dddddd;	position: relative;	left: 270px;	height: 50px;	padding: 20px 0 0 50px;}#nav {	background: #ffffff;	-moz-box-shadow:0px 0px 5px #c0c0c0;	-webkit-box-shadow:0px 0px 5px #c0c0c0;	box-shadow:0px 0px 5px #c0c0c0;	width: 100%;	height: 55px;	margin: 0 0 50px 0;}ul.topnav {	list-style: none;	padding: 0 50px;	margin: 0;	position: relative;	top: 10px;	float: left;	font-size: 16px;	z-index: 100000;}ul.topnav li {	float: left;	margin:0;	padding: 0 45px 0 0;	position: relative; /*--Declare X and Y axis base for sub navigation--*/}ul.topnav li a{	padding: 10px 5px;	color: #c0c0c0;	font-family: 'Garogier';	text-transform: uppercase;	display: block;	text-decoration: none;	float: left;}ul.topnav li a:hover{	color: #820024;}ul.topnav li span { /*--Drop down trigger styles--*/	width: 17px;	height: 35px;	float: left;	background: url(../images/arrow.png) no-repeat center center;}ul.topnav li span.subhover {	background: url('../images/arrow-hover.png') no-repeat center center;	cursor: pointer;} /*--Hover effect for trigger--*/ul.topnav li ul.subnav {	list-style: none;	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/	left: 0; top: 35px;	background: #333;	margin: 0; padding: 0;	display: none;	float: left;	width: 170px;	border: 1px solid #111;	-moz-border-radius:5px;	-webkit-border-radius:5px;	border-radius:5px;}ul.topnav li ul.subnav li{	margin: 0; padding: 0;	border-top: 1px solid #252525; /*--Create bevel effect--*/	border-bottom: 1px solid #444; /*--Create bevel effect--*/	clear: both;	width: 170px;	font-size: 13px;}html ul.topnav li ul.subnav li a {	float: left;	width: 145px;	background: #333 url(../images/arrow-left.png) no-repeat 10px center;	padding-left: 20px;}html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/	background: #222 url(../images/arrow-left.png) no-repeat 10px center;}#pcontent {	width: 400px;	background: #ffffff;	padding: 20px;	position: relative;	top: 80px;	opacity:0.8;	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);	/*-ms-filter must come before filter*/	filter: alpha(opacity=80);}.one {	width: 23%;	float: left;}.two {	width: 23%;	float: left;	margin: 0 0 0 25px;}.three {	width: 23%;	float: left;	margin: 0 0 0 25px;}.four {	width: 23%;	float: right;}.clear {	clear: both;}hr.grey {	margin: 50px 0 50px;	border: 0 none;	background: #d0d0d0;	height: 1px;}#navyfooter {	width: 100%;	background: #00274c;	margin: 50px 0 0 0;}table#listing {	padding: 10px;	font-size: 11px;	font-family: Helvetica;	color: #838383;}table#listing tr {	border-bottom: 1px dotted #c0c0c0;}table#listing tr:hover {	background: #e7e3ef;	font-style: none;}table#listing tr td {	padding: 10px;}table#listing tr th {	text-align: left;	font-weight: 300;	font-family: 'Garogier';	color: #820024;	font-size: 12px;	text-transform: uppercase;	padding: 10px;	border-bottom: 1px dotted #c0c0c0;	background: #e7e3ef;}.feature {	font-size: 12px;	font-weight: bold;	font-family: Helvetica;	color: #726886;	width: 120px;	height: 25px;	padding: 10px 0 0 20px;	background: #ffffff;	opacity:0.8;	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);	/*-ms-filter must come before filter*/	filter: alpha(opacity=80);}.noImage {	background: url('../images/horses/comingsoon.png') no-repeat 0 0;	margin: 0 auto;	width: 463px;	height: 226px;}.one-half {	width: 49%;	float: left;}.two-half {	width: 49%;	float: right;}.one-third {	width: 29%;	float: left;}.two-third {	width: 29%;	float: left;}.three-third {	width: 29%;	float: right;}table#pedigree {	font-size: 11px;	font-family: Helvetica;	color: #c0c0c0;	text-transform: uppercase;}table#pedigree #siredam {	color: #e19b88;	font-size: 16px;	font-family: 'Garogier';	font-weight: 300;	text-transform: none;}table#pedigree .bottom {	border-bottom: 1px dotted #d0d0d0;;}table#pedigree tr td {	vertical-align: middle;	padding: 5px;}

Reset CSS:

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, font, 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 {	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%;	vertical-align: baseline;	background: transparent;		text-decoration: none;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}/* remember to define focus styles! */:focus {	outline: 0;}/* remember to highlight inserts somehow! */ins {	text-decoration: none;}del {	text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {	border-collapse: collapse;	border-spacing: 0;}

Home page 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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Flower Farm Warmbloods</title>	<link rel="stylesheet" href="css/reset.css" />	<link rel="stylesheet" href="css/style.css" />	<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>	<script type="text/javascript" src="js/navigation.js"></script></head><body><div class="wrapper">	<div id="topnav">	</div>	<div id="logo">		<div id="name">		<p class="garogier-navy-medium">FLOWER FARM</p>		<p class="helvetica-navy-small">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>		</div>	</div>	<div id="nav">		<ul class="topnav">			<li><a href="index.php">Home</a></li>			<li><a href="about.php">About</a>				<ul class="subnav">					<li><a href="gingerparker.php">Ginger Parker</a></li>					<li><a href="facilities.php">Facilities</a></li>					<li><a href="breeding.php">Breeding</a></li>					<li><a href="services.php">Services</a></li>				</ul>			</li>			<li><a href="vinca.php">Vinca</a>				<ul class="subnav">					<li><a href="aboutvinca.php">About Vinca</a></li>					<li><a href="progeny.php">Progeny</a></li>					<li><a href="vincagallery.php">Gallery</a></li>				</ul>			</li>			<li><a href="sales.php">Sales</a>				<ul class="subnav">					<li><a href="currentsales.php">Current Sales</a></li>					<li><a href="sold.php">Past Sales</a></li>				</ul>			</li>			<li><a href="gallery.php">Gallery</a></li>			<li><a href="contact.php">Contact</a>				<ul class="subnav">					<li><a href="contact.php">Contact Us</a></li>					<li><a href="facebook.php">Facebook</a></li>				</ul>			</li>		</ul>	</div>	<div class="container">	<div class="one">	<img src="images/one.png" class="border" />	<p class="garogier-burg-medium">News</p>	<p class="helvetica-grey-middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate lectus quis arcu congue posuere. Donec quis erat id nibh hendrerit commodo. Fusce quam dui, sodales at tincidunt at, adipiscing ut sapien. Nullam faucibus semper accumsan. In hac habitasse platea. <a href="news.php">Read More</a></p>	</div>	<div class="two">	<img src="images/two.png" class="border" />	<p class="garogier-burg-medium">Vinca</p>	<p class="helvetica-grey-middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate lectus quis arcu congue posuere. Donec quis erat id nibh hendrerit commodo. Fusce quam dui, sodales at tincidunt at, adipiscing ut sapien. Nullam faucibus semper accumsan. In hac habitasse platea. <a href="vinca.php">Read More</a></p>	</div>	<div class="three">	<img src="images/three.png" class="border" />	<p class="garogier-burg-medium">Breeding</p>	<p class="helvetica-grey-middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate lectus quis arcu congue posuere. Donec quis erat id nibh hendrerit commodo. Fusce quam dui, sodales at tincidunt at, adipiscing ut sapien. Nullam faucibus semper accumsan. In hac habitasse platea. <a href="breeding.php">Read More</a></p>	</div>	<div class="four">	<img src="images/four.png" class="border" />	<p class="garogier-burg-medium">Sales</p>	<p class="helvetica-grey-middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vulputate lectus quis arcu congue posuere. Donec quis erat id nibh hendrerit commodo. Fusce quam dui, sodales at tincidunt at, adipiscing ut sapien. Nullam faucibus semper accumsan. In hac habitasse platea. <a href="sales.php">Read More</a></p>	</div>	</div>	<div class="clear"></div>	<div id="navyfooter">		<div class="wrapper2" style="padding:20px;">		<div class="one-half"><p class="helvetica-navy-tiny" style="font-size:11px;">Copyright © 2007-2011  Flower Farm  |  Designed by Erika Sentz</p>		</div>		<div class="two-half"><p class="helvetica-navy-tiny" style="text-align:right;"><a href="http://www.facebook.com/Flower-Farm"><img src="images/fb.png" border="0" /></a>  <a href="http://www.youtube.com/flowerfarmwarmbloods/"><img src="images/youtube.png" border="0" /></a></p>		</div>				<div class="clear"></div>	</div>	</div></div>  </body></html>

Anyone have any ideas for why it's doing what its doing? Thanks in advance!

[thescientist]

the issue is because of two things. For whatever reason, #name is relatively positioned. thus taking it out of the flow of the page. This means any elements contained within it won't respect the container that #logo created. For this reason, the p tags are expanding way far to the right of the page, following their block level nature.I would remove the positioning from #name, and the adjust the left padding for these two elementsp.helvetica-navy-smallgarogier-navy-mediumas needed.