Hi,

I was wondering how to go about aligning the left border of a div. The page I'm working with can be found here: http://www.mrmollman.com. I'm trying to make that border-left property centered on the page so the text comes out from the right of it.

Here is the code:

HTML

<?xml version="1.0" encoding="UTF-8" ?>
<!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>
		<title>mrmollman.com, homepage of John Mollman</title>
		<!-- <link rel="icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.ico" /> -->
		<!-- <link rel="shortcut icon" type="image/x-icon" href="http://www.mrmollman.com/images/icon.ico" /> -->
		<link rel="stylesheet" type="text/css" href="styles/index.css" />
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Homepage of John Mollman" />
		<meta name="keywords" content="mrmollman, mollman, mr, artwork, pixel, pixel art, art, isometric, 
				isometric pixel art, comics, cartoons, webcomics, illustrations, sketches, drawings,
				scripts, software, wads, doom wads, doom, john, john mollman" lang="en-us" />
		
		<!--
			Website written and designed by John Mollman
			All graphics/images created by John Mollman
			email: jw.mollman@gmail.com
			http://www.mrmollman.com/
		-->
	</head>
	
	<body>
		<div id="outter">
			<div id="inner">
				<h2>mrmollman</h2>
				<a href="pixelart.html">pixel art</a><br />
				<a href="drawings.html">drawings</a><br />
				<a href="webcomics.html">webcomics</a><br />
				<a href="scripts.html">scripts / software</a><br />
				<a href="wads.html">doom wads</a><br /><br />
				
				<a href="http://delicious.com/jwmollman">del.icio.us</a><br />
				<a href="http://identi.ca/jwmollman">identi.ca</a><br />
				<a href="http://www.daniweb.com/forums/member791364.html">daniweb</a><br />
				<a href="http://pixeljoint.com/p/27143.htm">pixel joint</a><br />
				<a href="mailto:jw.mollman@gmail.com">email</a><br />
				<a href="http://johnmollman.blogspot.com">blog</a>
			</div>
		</div>
	</body>
</html>

CSS

/* stylesheet for the index page */
body {
	font: 18pt Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #000;
	line-height: 32px;
}
#outter {
	width: 500px;
	margin: 50px auto 0 auto;
	border-left: 1px solid #6e6e6e;
	text-align: left;
}
#inner {
	margin: 0 15px 0 15px;
	text-align: left;
}
a:link {
	text-decoration: none;
	color: #6e6e6e;
}
a:visited {
	text-decoration: none;
	color: #6e6e6e;
}
a:hover {
	text-decoration: underline;
	color: #6e6e6e;
}
a:active {
	text-decoration: underline;
	color: #6e6e6e;
}

I do not get the question. Do you want to align your text to the left? On you page it appears to be centered, but I coppied the code you provided and it gave me this (Check on the attached image). Is this what you want?

Oh yes, sorry about that. I changed the layout last night.

What I was trying with that design was align the border to the center of the page, and then have the text come out the right of it, as it is in the picture.

Basically, how would I align the border-left property of that divider?

I hope I understood your question this time. Try this:

This is my index.html:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div id="container">
			<div id="toBeCentered">
				<h2>mrmollman</h2>				
				<a href="pixelart.html">pixel art</a><br />				
				<a href="drawings.html">drawings</a><br />				
				<a href="webcomics.html">webcomics</a><br />				
				<a href="scripts.html">scripts / software</a><br />				
				<a href="wads.html">doom wads</a><br /><br /> 				
				<a href="http://delicious.com/jwmollman">del.icio.us</a><br />				
				<a href="http://identi.ca/jwmollman">identi.ca</a><br />				
				<a href="http://www.daniweb.com/forums/member791364.html">daniweb</a><br />	
				<a href="http://pixeljoint.com/p/27143.htm">pixel joint</a><br />
				<a href="mailto:jw.mollman@gmail.com">email</a><br />		
				<a href="http://johnmollman.blogspot.com">blog</a>
			</div>
		</div>
	</body>
</html>

And my index.css

body
	{
		margin-left: auto;
		margin-right: auto;
		
	}
#container
	{
		text-align: center;
		padding: 50px;
	}

#toBeCentered
	{
		border: 0px;
		border-left: 2px solid #c0c0c0;
		width: 200px;
		text-align: left;
		padding: 3px;
		padding-left: 7px;
		font-family: tahoma,calibri, arial;
		font-size: 12px;
		font-weight: bolder;
	}

Please let us know if this does not address your concern and do not forget to mark this post as solved otherwise :-)

That doesn't seem to address my issue, but I believe I'll just go onto another simple layout.

Thank you for the help you have provided, and I have marked the thread as solved.