Hello, I have the following code:

<dt>
	<p style="text-align:left;">
		<a href="">SHOW HORSES</a>
	</p>
	<ul>				
		<li><a href="">Riding The Best</a></li>
		<li><a href="">Western</a></li>
	        <li><a href="">English</a></li>
		<li><a href="">Reference Trainers</a></li>
	</ul>
</dt>

with the stylesheet:

ul, li {
 display: inline;
 margin: 0;
 padding: 0;
}
p {
 display: inline;
}

/* Background of where the links are placed */
#list dt { 
	padding:7px;
	padding-right: 2%;
	text-align: right;
}

How would I set up the p to be all the way on the left, and the list items to be all the way on the right? Is there any way I can do this without using margins and pixels?

Absolute position the elements. If you want them to be positioned on the far right and left sides of another element you may also need a container div with a relative position.

p {
display: inline;
position: absolute;
left:0px;
}

ul, li {
position:absolute;
 right:0px;
 display: inline;
 margin: 0;
 padding: 0;
}

Try this, modify something:

<html>
<head>
<style>
ul {
 display: block;
 float:right;
 margin: 0;
 padding: 0;
 text-align:right;
}
 li {
 display: inline;
 margin: 0;
 padding: 0;
}
p {
 display: block;
 float:left;
}

/* Background of where the links are placed */
#list dt { 
	padding:7px;
	padding-right: 2%;
	text-align: right;
	border:1 solid red;
}
</style>
</head>
<body>
<div style="width:400px">
	<dt>
		<p style="width:150px;text-align:left;">
			<a href="">SHOW HORSES</a>
		</p>
		<ul style="width:200px">				
			<li><a href="">Riding The Best</a></li>
			<li><a href="">Western</a></li>
		        <li><a href="">English</a></li>
			<li><a href="">Reference Trainers</a></li>
		</ul>
	</dt>
</div>
</body>
</html>

when I do that the links in the li all line up directly on top of each other