Member Avatar for jwmollman

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;
}
Edited by jwmollman because: n/a
  • 2 Contributors
  • 4 Replies
  • 142 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jwmollman
Member Avatar for sithembisophp

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?

htmlproblem.jpg 14.75 KB
Member Avatar for jwmollman

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?

Member Avatar for sithembisophp

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 :-)

Member Avatar for jwmollman

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.