Trying to Centre DIV - Tumblr Theme

HTML & CSS
1

Hi all,

hope someone can help me with this. I’m editing a tumblr.com theme and I can’t see how I can centre the contents.

I added a new DIV at the very beginning of the HTML (wrapper-div) but the contents of the new div wouldn’t centre align within it.

This is the DIV I added: #wrapper {
width: 800px;
margin: 0 auto;
}

This is the full code from the theme. There is a lot of code and I don’t fully understand it so hope I’m not asking to much for help with this…

This is the current working page: www.sawps.tumblr.com

<!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" xml:lang="en" lang="en">
    <head>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
        <link rel="icon" href="{Favicon}"/>
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
		<link rel="stylesheet" type="text/css" href="http://phatjoints.com/blog/testcss.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/VGGkpy5vm/swfaddress.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/zhlkpy5w3/jquery.cookie.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/bzKkztwyg/magic.js"></script>
		<script type="text/javascript">
		// specify your default format. Options include "grid" and "list".
		default_format = "grid"
		//
		{block:PermalinkPage}
		is_index = false        
		var disqus_url = "{Permalink}"; 
		var disqus_title="{block:PostTitle}{PostTitle}{/block:PostTitle}";
		{/block:PermalinkPage}
		{block:IndexPage}
		is_index = true
		{/block:IndexPage}     
		{block:PreviousPage}
		var previous_page = "{PreviousPage}"
        {/block:PreviousPage}
        {block:NextPage}
		var next_page = "{NextPage}"
        {/block:NextPage}   
		//
		</script>
		<meta name="color:Video BG" content="#000000">
		<meta name="color:Regular and Quote BG" content="#08bcc3">
		<meta name="color:Chat BG" content="#f392dd">
		<meta name="color:Link BG" content="#a10789">
		<meta name="color:Audio BG" content="#ff4040">
		<meta name="text:Disqus Shortname" content="" />
		<meta name="if:Show About In Nav" content="1"/>
		<meta name="if:Show Following In Nav" content="1"/>
		
		<style>
		/* custom colours */
		.grid .post_thumb .video{
			background-color:{color:Video BG};
		}
		.grid .post_thumb .regular,
		.grid .post_thumb .quote{    
			background-color:{color:Regular and Quote BG};			
		}       
		.grid .post_thumb .chat{
			background-color:{color:Chat BG};
		}         
		.grid .post_thumb .link{
			background-color:{color:Link BG};
		}           
		.grid .post_thumb .audio{
			background-color:{color:Audio BG};
		}
.regular img { max-width: 100&#37;; }
		{CustomCSS}
#wrapper {
	width: 800px;
	margin: 0 auto;
}
		</style>
    </head>
    <body class="cargo {block:IndexPage}index{/block:IndexPage}{block:PermalinkPage}perma{/block:PermalinkPage}">
<div id="wrapper">	
<div id="info" class="hide">
		{block:NextPage}
		<span class="next_page">{NextPage}</span>
        {/block:NextPage}       
	</div>
	<div id="loading"></div>
	<div id="debug"></div>
<div id="banner"><img src="http://www.sawps.co.uk/images/sawps-tmp-banner.jpg" width="706" height="240" title="" alt="" /></div>
<div id="navigation">Content for  id "navigation" Goes Here</div>

<div id="welcome_msg">Content for  id "welcome_msg" Goes Here</div>
	<div id="main_column">
		<!--{block:IndexPage}-->
		<div class="list hide">
			<!--{block:Posts}-->
			<div class="post" id="{PostID}">
			<div class="gallery_hold"></div>
			<div class="inner{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
			{block:Regular}
                <div class="regular">
                    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                    <div class="copy">{Body}</div>
                </div>
            {/block:Regular}
			{block:Photo}
                <div class="photo">
                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
                    {block:Caption}
                    <div class="copy">{Caption}</div>
                    {/block:Caption}                  
                </div>
            {/block:Photo}
			{block:Video}
                <div class="video">
                    {Video-500}
                    {block:Caption}
                     <div class="copy">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Video}
  			{block:Photoset}
  				<div class="photoset">{Photoset-500}</div>
				{block:Caption}
				<div class="copy">{Caption}</div>
				{/block:Caption}
  			{/block:Photoset}
			{block:Quote}
			<div class="quote">
				<div class="the_quote">{Quote}</div>
			   	{block:Source}
					<div class="copy">&ndash; {Source}</div>
				{/block:Source}
			</div>
			{/block:Quote}
			{block:Audio}
			<div class="audio">
				<div class="album_info">
					{block:Artist}<span class="artist">{Artist}</span>{/block:Artist}&nbsp;&ndash;&nbsp;{block:TrackName}<span class="track">{TrackName}{/block:TrackName}
				</div>
				{block:AlbumArt}
					<div class="album_art"><img src="{AlbumArtURL}" /></div>
				{/block:AlbumArt}
				<div class="player">{AudioPlayerBlack}</div>
				{block:Caption}
	            <div class="copy">{Caption}{block:ExternalAudio}<p class="download"><a href="{ExternalAudioURL}">Download MP3</a></p>{/block:ExternalAudio}</div>
	            {/block:Caption}
			</div>
			{/block:Audio} 
			{block:Chat}
			<div class="chat">
				{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
				<div class="copy">
					<ul class="chat">
						{block:Lines}
						<li class="{Alt} user_{UserNumber}">
							{block:Label}
							<span class="chat_label">{Label}</span>
							{/block:Label}
							<span class="chat_line">{Line}</span>
						</li>
						{/block:Lines}
					</ul>
				</div>
			</div>
			{/block:Chat}
			{block:Link}
			<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
			{block:Description}
			<div class="copy">
				<span class="description">{Description}</span>
			</div>
			{/block:Description}
			{/block:Link}
			<div class="info">
				<p><a href="{Permalink}" class="date">{TimeAgo}</a>&nbsp;{block:NoteCount} <a href="{Permalink}#notes" class="notes">{NoteCountWithLabel}</a>{/block:NoteCount}{block:Photo}{block:HighRes} <a target="_blank" href="{PhotoURL-HighRes}" class="zoom_image">View Larger Image</a>{/block:HighRes}{/block:Photo}{block:IfDisqusShortname} <a href="{Permalink}#disqus_thread">view comments</a>{/block:IfDisqusShortname}</p>
			</div>
			</div><!-- /.inner -->       
			</div><!-- /.post -->  
			<!--{/block:Posts}-->    		
		</div>
		<!--{/block:IndexPage}-->
		<!--{block:IndexPage}-->
		<div id="entry"></div>
		<!--{/block:IndexPage}-->
		
		<div id="pages" class="hide list">
			 <!--{block:Posts}-->
				<div class="gallery_hold"></div>
				<div class="inner{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
				{block:Regular}
	                <div class="regular">
	                    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
	                    <div class="copy">{Body}</div>
	                </div>
	            {/block:Regular}
				{block:Photo}
	                <div class="photo">
	                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
	                    {block:Caption}
	                    <div class="copy">{Caption}</div>
	                    {/block:Caption}
	                </div>
	            {/block:Photo}  
				{block:Audio}                 
				<div class="audio">
					{block:AlbumArt}
						<div class="album_art"><img src="{AlbumArtURL}" /></div>
					{/block:AlbumArt}
					<div class="player">{AudioPlayerBlack}</div>
					{block:Caption}
		            <div class="copy">{Caption}{block:ExternalAudio}<p class="download"><a href="{ExternalAudioURL}">Download MP3</a></p>{/block:ExternalAudio}</div>
		            {/block:Caption}
				</div>
				{/block:Audio}
	            {block:Video}
	                <div class="video">
	                    {Video-500}
	                    {block:Caption}
	                     <div class="copy">{Caption}</div>
	                    {/block:Caption}
	                </div>
	            {/block:Video} 
	  			{block:Photoset}
	  				<div class="photoset">{Photoset-500}</div>
					{block:Caption}
					<div class="copy">{Caption}</div>
					{/block:Caption}
	  			{/block:Photoset}
				{block:Quote}
				<div class="quote">
					<div class="the_quote">{Quote}</div>
				   	{block:Source}
						<div class="copy">&ndash; {Source}</div>
					{/block:Source}
				</div>
				{/block:Quote}
				{block:Chat}
				<div class="chat">
					{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
					<div class="copy">
						<ul class="chat">
							{block:Lines}
							<li class="{Alt} user_{UserNumber}">
								{block:Label}
								<span class="chat_label">{Label}</span>
								{/block:Label}
								<span class="chat_line">{Line}</span>
							</li>
							{/block:Lines}
						</ul>
					</div>
				</div>
				{/block:Chat}
				{block:Link}
				<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
				{block:Description}
				<div class="copy">
					<span class="description">{Description}</span>
				</div>
				{/block:Description}
				{/block:Link}
				</div><!-- /.inner --> 
				<!--{/block:Posts}-->			
		</div>
		
		<!--{block:PermalinkPage}-->
		<div id="entry">
			<!--{block:Posts}-->
			<div class="gallery_hold"></div>
			<div class="inner{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
			{block:Regular}
                <div class="regular">
                    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                    <div class="copy">{Body}</div>
                </div>
            {/block:Regular}
			{block:Photo}
                <div class="photo">
                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
                    {block:Caption}
                    <div class="copy">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Photo}  
			{block:Audio}                 
			<div class="audio">
				{block:AlbumArt}
					<div class="album_art"><img src="{AlbumArtURL}" /></div>
				{/block:AlbumArt}
				<div class="player">{AudioPlayerBlack}</div>
				{block:Caption}
	            <div class="copy">{Caption}{block:ExternalAudio}<p class="download"><a href="{ExternalAudioURL}">Download MP3</a></p>{/block:ExternalAudio}</div>
	            {/block:Caption}
			</div>
			{/block:Audio}
            {block:Video}
                <div class="video">
                    {Video-500}
                    {block:Caption}
                     <div class="copy">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Video} 
  			{block:Photoset}
  				<div class="photoset">{Photoset-500}</div>
				{block:Caption}
				<div class="copy">{Caption}</div>
				{/block:Caption}
  			{/block:Photoset}
			{block:Quote}
			<div class="quote">
				<div class="the_quote">{Quote}</div>
			   	{block:Source}
					<div class="copy">&ndash; {Source}</div>
				{/block:Source}
			</div>
			{/block:Quote}
			{block:Chat}
			<div class="chat">
				{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
				<div class="copy">
					<ul class="chat">
						{block:Lines}
						<li class="{Alt} user_{UserNumber}">
							{block:Label}
							<span class="chat_label">{Label}</span>
							{/block:Label}
							<span class="chat_line">{Line}</span>
						</li>
						{/block:Lines}
					</ul>
				</div>
			</div>
			{/block:Chat}
			{block:Link}
			<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
			{block:Description}
			<div class="copy">
				<span class="description">{Description}</span>
			</div>
			{/block:Description}
			{/block:Link}
			<div class="info">
				<p>Posted <span class="date">{TimeAgo}</span>{block:HasTags} &amp; Filed under {block:Tags} <a href="{TagURL}">{Tag}</a>, {/block:Tags}{/block:HasTags}{block:PostNotes} <a href="#notes">{NoteCountWithLabel}</a>{/block:PostNotes}{block:Audio} {FormattedPlayCount} plays{/block:Audio}{block:Photo}{block:HighRes} <a target="_blank" href="{PhotoURL-HighRes}" class="zoom_image">View Larger Image</a>{/block:HighRes}{/block:Photo}</p>
			</div>
			</div><!-- /.inner --> 
			{block:PostNotes}
			<a name="notes"></a>
			<div class="notes_hold">
				<h4>Notes:</h4>
				{PostNotes}					
			</div>         
			{/block:PostNotes}
			<!--{/block:Posts}-->           
			{block:Permalink}  
			<div id="post_comments">
			<div id="disqus_thread">
			</div>
		    {/block:Permalink}
			</div><!-- /#post_comments -->
		</div><!-- /#entry --> 
			{block:IfDisqusShortname}
			<div id="commentary">
                {block:Permalink}
				<div id="disqus_thread"></div>

                //----------- REMOVED ------------//

                {/block:Permalink}
			</div>
            {/block:IfDisqusShortname}
		<!-- {/block:PermalinkPage}-->
		<!--{block:IndexPage}-->
  		<div class="line hide"></div>
		<div class="grid hide">
			<!--{block:Posts}-->
			{block:Photo}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image photo rounded">
					<div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
					<div class="icon"></div>
				</div>
			</div>
			{/block:Photo}
			{block:Video}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image video rounded">
					<div class="icon"></div>
				</div>
			</div>
            {/block:Video}
           	{block:Photoset}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image photoset rounded">
					<div class="thumbs rounded"></div>
					<div class="icon"></div>
				</div>
			</div>
           	{/block:Photoset}
			{block:Regular}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image regular rounded">
					<div class="inner">{block:Title}{Title}{/block:Title}</div>	 
				</div>
			</div>
			{/block:Regular} 
			{block:Quote}
			<div class="post_thumb" id="thumb_{PostID}">  
				<div class="image quote rounded">
					<div class="inner">"{Quote}"</div>						
				</div>
			</div>
			{/block:Quote}
			{block:Chat}
			<div class="post_thumb" id="thumb_{PostID}">  
				<div class="image chat rounded">
					<div class="inner">{block:Title}{Title}{/block:Title}</div>						
				</div>
			</div>
			{/block:Chat}
			{block:Link}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image link rounded">
					<div class="inner">{Name}</div>						
				</div>
			</div>
			{/block:Link}
			{block:Audio}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image audio rounded">  
					{block:AlbumArt}
						<div class="bg rounded" style="background-image:url('{AlbumArtURL}')"></div>
					{/block:AlbumArt}
					<div class="inner">{block:Artist}{Artist}&nbsp;&ndash;&nbsp;{/block:Artist}{block:TrackName}{TrackName}<br />{/block:TrackName}
						{Caption}</div>						
				</div>
			</div>
			{/block:Audio}
			<!--{/block:Posts}-->
			<div class="clear_left"></div>
		</div><!-- /.grid -->
		<!--{block:IndexPage}-->
	</div>        
</div>
    </body>
</html>

Forgot to add the linked CSS…

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:2;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}          

/*

cargo tumblr theme v1.
by http://jarredbishop.info

*/     

html{
	background: url('background.jp') top left repeat;
}
body{
	font-family:Helvetica, Arial, Verdana;
	color:#777777;
	font-size:12px;
	line-height:10px; 
	padding-bottom:200px;
}
#loading{
	position:fixed;
	width:30px;
	height:30px;
	background-image:url('http://static.tumblr.com/xhpdxdi/iaXkpy5ys/loadinganim.gif');
	background-position:center center;
	background-repeat:no-repeat;
	z-index:10;
}     
#debug{
	position:fixed;
	bottom:10px;
	right:10px;
	text-align:right;
	width:300px;
	z-index:30;
}
.clear_left{
	clear:left;
}
.hide{
	display:none;
}
.rounded{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;	
}
#main_column{
	position:relative;
	top:10px;
	width:800px;
        margin-left:auto;
        margin-right:auto;
}
#nav_list{
        display:none;
	position:fixed;
	left:730px;
	top:30px;
	width:160px;
}
#nav_list h1{
	font-weight:bold;
	font-size:12px;
	color:#000000;
	line-height:15px;
}
#nav_list h1 a{
	color:inherit;
	text-decoration:none;
}
#nav_list h1 a:hover{
	text-decoration:underline;
}                            
#nav_list p{
	font-style:italic;
	font-size:12px;
	line-height:17px;
}
#nav_list p a{
	color:#000000;
}
#nav_list ul li{
	font-size:11px;
	line-height:15px;
}
#nav_list ul li a{
	padding:2px;
	margin:-2px;
	text-decoration:none;
	color:#666666;
}
#nav_list ul li a:hover{
	background-color:#000000;
	color:#ffffff;
}
#nav_list ul.faint li a{
	color:#aaaaaa;
}
#nav_list ul.faint li a:hover{
	color:#ffffff;
}
#main_column .line{
	margin-top:30px;
	width:660px;
	border-top:1px solid #dddddd;	
	margin-bottom:30px;
}
#main_column .grid{
	width:780px;
}
.post_thumb{
	float:left;
	margin-right:30px;
	margin-bottom:30px;
	width:200px;
	height:134px;
	position:relative;
}
.post_thumb .image{  
	position:absolute;
	width:200px;
	height:134px;
	background-color:#eeeeee;
	background-position:center center;
	cursor:pointer;
	z-index:2;
}             
.post_thumb .regular,
.post_thumb .link{
	width:200px;
	height:134px;
	cursor:pointer;
}
.post_thumb:hover .image{

}
.post_thumb .loading{
	position:absolute;
	z-index:3;
	background-image:url('http://static.tumblr.com/xhpdxdi/iaXkpy5ys/loadinganim.gif');
	background-repeat:no-repeat;
	background-color:rgba(255,255,255, .9);
	background-position:center center;
	width:200px;
	height:134px;
	cursor:pointer;
}    
.post_thumb .photoset{
	position:relative;
	width:200px;
	height:134px;
	overflow:hidden;
	background-color:#000;
}
.post_thumb .photoset .thumbs .thumb{
	position:absolute;
	left:0px;
	top:0px;
	opacity:.4;
	width:200px;
	height:134px;
	background-position:center center;
}
.post_thumb .photoset .thumbs .thumb img{
	width:200px;
}
.post_thumb .info{
	margin-top:7px;
	width:200px;
	text-align:center;
	line-height:16px; 
	position:absolute;
	left:0px;
	top:134px;
}
.post_thumb .info a.title{
	text-decoration:none;
	padding:3px;
	font-weight:bold;
	color:#000000;
}
.post_thumb .info span.tags{
	font-size:11px;
	font-family:Georgia;
	font-style:italic;
	padding-top:5px;
	color:#cccccc;
} 
.post_thumb .info span.tags a{
	text-decoration:none;
	color:#aaaaaa;
}
.post_thumb .info span.tags a:hover{
	text-decoration:underline;
	color:#000000;
}
.post_thumb:hover .info a.title,
.selected .info a.title,
.selected .info a.title:hover{
	background-color:#fff200 !important;
}
.grid .post_thumb .regular,
.grid .post_thumb .quote{
	background-color:#08bcc3;
	background-image:url('http://static.tumblr.com/xhpdxdi/MGpkpy604/regular_icon.png');
	background-position:10px 104px;
	background-repeat:no-repeat;
}      
.grid .post_thumb .chat{
	background-color:#f392dd;
	background-image:url('http://static.tumblr.com/xhpdxdi/0E7kq0db2/chat_icon.png');
	background-position:10px 104px;
	background-repeat:no-repeat;
}
.grid .post_thumb .link{
	background-color:#a10789;
	background-image:url('http://static.tumblr.com/xhpdxdi/IpFkpy615/link_icon.png');
	background-position:10px 104px;
	background-repeat:no-repeat;
} 
.grid .post_thumb .audio{
	background-color:#ff4040;
	background-image:url('http://static.tumblr.com/xhpdxdi/RbRkpy61p/audio_icon.png');
	background-position:10px 104px;
	background-repeat:no-repeat;
}
.grid .post_thumb .inner{
	padding-left:10px;
	padding-top:10px;
	line-height:15px;
	color:#ffffff;
}
.grid .post_thumb .inner .title,
.grid .post_thumb .inner a.title{
	font-size:14px;
	font-weight:bold; 
	text-decoration:none;
	color:inherit;
}               
.grid .post_thumb .quote .inner{
	margin-right:20px;
}
.post_thumb a{
	color:#ffffff;
	text-decoration:underline;
}                            
.post_thumb a:hover{
	text-decoration:none;
}
.grid .image .inner .time{
	font-size:13px;
	color:rgba(255,255,255, .8);
}
.grid .image .inner .date{
	font-size:12px;
	color:rgba(255,255,255, .6);
}
.grid .video{
	background-color:#000000;
	background-position:center center;
	background-repeat:no-repeat;   
	position:relative;                                                          
	overflow:hidden;
}                               
.grid .video .bg,
.grid .image .bg{
	width:200px;
	height:134px;
	background-position:center center;
	position:absolute;     
	overflow:hidden;
	z-index:1;
}              
.grid .image .icon,
.grid .photoset .icon{
	width:200px;
	height:134px;
	position:absolute;
	background-position:10px 104px;
	background-repeat:no-repeat;  
	z-index:3;
}
.grid .video .icon{   
	background-image:url('http://static.tumblr.com/xhpdxdi/PZ1kpy629/play_icon.png');   
}      
.grid .photoset .icon{
	background-image:url('http://jarredbishop.info/cargo.tumblr/images/photosetIcon.png');   
	background-position:12px 104px;
}
.grid .photo .icon{

}
#entry,
.list{
	width:660px;
}
#entry .info,
.list .info{
	margin-top:30px;
	font-size:11px;
	color:#cccccc;
}
#entry .info a,
.list .info a{
	color:#bbbbbb;
	font-style:italic;
}
#entry .info a:hover,
.list .info a:hover{
	color:#333333;
	text-decoration:none;
}
.perma #entry .info{
	font-style:italic;
}
#entry .info a,
.list .info a{
	color:#bbbbbb;
	text-decoration:underline;
}
#entry h2,
.list h2{
	font-size:28px;
	font-weight:bold;
	letter-spacing:-1px;
	line-height:30px;
	color:#000000;
	margin-bottom:10px;
}
#entry h2 a,
.list h2 a{
	color:inherit;
	text-decoration:none;
}
#entry h2 a:hover,
.list h2 a:hover{
	text-decoration:underline;
}
#entry .copy,
.list .copy{
	margin-top:0px;
	width:700px;
	font-size:12px;
	line-height:15px;
}
#entry .copy a,
.list .copy a{
	color:#000000;
	text-decoration:underline;
	padding:1px;
	margin:-1px;
}
#entry .copy a:hover,
.list .copy a:hover{
	background-color:#fff200;
	color:#000000;           
	text-decoration:none;
}
#entry .copy p,
.list .copy p{
	margin-bottom:10px;
	width:500px;
}
#entry .copy img,
.list .copy img{

}    
.list .post{
	margin-bottom:100px;
}    
#entry blockquote,
.list blockquote{
	padding-left:10px;
	border-left:1px dotted #cccccc;
}
/* galleries */
#entry #gallery{
	height:300px;
	position:relative;
	width:730px;
	margin-bottom:10px;
}
#gallery .image{
	position:absolute;
	z-index:2;
}                    
#gallery .selected{
	z-index:3;
}
#gallery_ctrls{
	margin-bottom:30px;
	font-size:11px;
	color:#aaaaaa;
} 
#gallery_ctrls .previous,
#gallery_ctrls .next{
	cursor:pointer;
	text-decoration:underline;
	color:#666666;
}      
#entry .i_follow{
	float:left;
	width:60px;
	margin-right:5px;
	margin-bottom:5px;
} 
#entry .copy,
.list .copy,
#entry .copy p,
.list .copy p,
#entry .copy blockquote,
.list .copy blockquote{
	margin-top:10px;       
	width:500px;
} 
.i_follow .info{
	display:none;
}
.i_follow .image{
	display:block;
	width:60px;
	height:60px;  
	background-position:center center;
	text-decoration:none;
}
.post_preloader{
	padding-bottom:40px;
	background-image:url('http://static.tumblr.com/xhpdxdi/iaXkpy5ys/loadinganim.gif');
	background-repeat:no-repeat;
	background-position:top left;
	padding-left:30px;
	padding-top:5px;
	color:#aaaaaa;
}         
#entry .notes_hold{
	margin-top:100px;
	width:500px; 
	margin-bottom:100px;
}              
#entry .notes_hold h4{
	font-size:13px;
	font-weight:bold;
	font-style:italic;
	color:#aaaaaa;
	margin-bottom:10px;
}   
#entry .notes li{
	padding-bottom:5px;
	padding-top:5px;
	position:relative;
	line-height:20px;
	color:#999999;
}                      
#entry .notes li .avatar{
	padding-right:10px;
	height:100%;
}
#entry .notes li a{
	color:#666666;
	text-decoration:none;
}        
#entry .notes li a:hover{
	color:#000000;
	text-decoration:underline;
}
#entry .notes .note{
	border-bottom:1px solid #dddddd;
}  
#entry .notes .note blockquote{
	font-style:italic;
}            
.quote .the_quote{
	font-size:20px;
	line-height:24px;
	width:500px;
	color:#000000;
}
.quote .copy{
	color:#999999;
	font-style:italic;   
}                       
#credit{
        display:none;
        position:fixed;
	left:730px;
	bottom:15px;
	font-size:11px;
	color:#bbbbbb;                 
}                
#credit a{
	text-decoration:none;
	border-bottom:1px solid #eeeeee;
	color:#bbbbbb;
}                                  
#credit a:hover{
	color:#666666;
	border-bottom:1px solid #ffffff;
}
ul.chat li{
	line-height:20px;
}                    
ul.chat li.even{
	color:#999999;
}
ul.chat li span.chat_label{
	padding-right:4px;
	color:#000000;
}
.album_art{
	margin-bottom:0px;
}          
.album_art img{
	width:205px;
	border:1px solid #000;
}
.album_info{
	margin-bottom:10px;
	line-height:15px;
	color:#555;
}
.album_info .artist{
	font-weight:bold;
}              
.album_info .track{
	display:block;
	font-style:italic;
}
.audio .player{
	margin:0px;
	padding:0px;
}
#banner {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#navigation {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 15px;
}
#welcome_msg {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
}

Thanks in advance

2

As, left & right margin set to auto for “Wrapper”; this set ONLY the “Wrapper” div aligned to center of the browser not the content inside the div.

To set the content within the Wrapper div to be aligned to the center of “Wrapper”, you can add a property “text-align:center”

Sample code:

#wrapper {
width: 800px;
margin: 0 auto;
text-align:center;
}

3

text-align: center will only center inlines such as text and images. It will not center blocks, except in Internet Exploder.

4

correctly mentioned by Stomme poes; Oh yes, sorry forgot to mention in the last post.

I normally have margin set to auto for blocks.

Appreciate if one can share a better way though.

5

Me too :wink:

Thanks

6

Sorry : )

First off, what you posted isn’t HTML, and I have trouble reading it. I’m not a tumblr programmer and I don’t study their templates.

However looking at your page, I see that while you’ve added #wrapper, it’s not wrapping much. The idea of a wrapper is that it wraps everyone. So disregarding all the really weird empty divs and other tumblr crap:

<body>
<div id=“wrapper”>
rest of the page
</div> <– this part… coming right before body closing tag
</body>

see how wrapper contains everyone on the page? If it did, then the width and automargins you’ve set on it could force the rest of the page to center.

The images are inline, so radiant_luv’s text-align: center would work for them, but any blocks you add would still go to the left… and since the images are sitting loose, then you’d have to set that text-align on the body which usually you don’t want to do because usually you don’t want ALL your text and everything centered (and you also don’t want to have to throw text-align: left on all children).

If you’re going to have a box (div or something) that’s dedicated to just holding those pictures, setting text-align: center on that box would work.

7

Thank you for looking at this for me and your advice. I did think it might be a bit much to ask for someone to analyse all the code and give a solution but had to ask because the solution I though would work just wasn’t.

I’ll keep working on it and see if I can get a better understanding of what’s going on and get it to do what I want.

Thanks again, really appreciate it.

8

All you have to do is, look at your web page in a browser, go to View Source (or something similar) and the code you see will be (should be) 100%HTML… because that’s all the browser ultimately sees, HTML, CSS and Javascript.

Copy and post that, and while it may still be a templated nightmare, it will be HTML.