Centering a DIV

unknowndomain

unknowndomain

unknowndomain

Soldato
Joined
18 Apr 2004
Posts
2,613
Location
London
So I have used the old width: *px; margin: auto; to get the wrapper div to put everything in the middle, but when I coupled that with a height: 100% trick to get a column which spans full height the wrapper is now centered but offset slightly with no obvious reason...

Live site: http://beta.gdnm.org/

Code: 
<!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 profile="http://gmpg.org/xfn/11">
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
				
			<title>GDNM *beta</title>
		
				
		<link rel="shortcut icon" href="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/favicon.ico" type="image/x-icon" />
		
		<meta name="generator" content="WordPress 2.6.5" />
		
		<link rel="alternate" type="application/rss+xml" title="GDNM *beta RSS Feed" href="http://beta.gdnm.org/feed/" />
		
		<script type="text/javascript" src="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/js/script.js"></script>
		<script type="text/javascript" src="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/js/prototype.js"></script>
		<script type="text/javascript" src="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/js/scriptaculous.js?load=effects"></script>
		
		
		<link rel="stylesheet" href="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/iefix.css" type="text/css" media="screen" />
			
		<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://beta.gdnm.org/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://beta.gdnm.org/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.6.5" />

<link rel="stylesheet" type="text/css" href="http://beta.gdnm.org/wp-content/mu-plugins/wp-recaptcha/recaptcha.css" />		
		<link rel="stylesheet" href="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/style.css" type="text/css" media="screen" />
	

		<style type="text/css">
			body {
									background-color: #ffffff;
						
									background-position: center top;
					background-image: url(http://inventivereception.com/boutique/images/pattern.gif);
					background-repeat: repeat;
					background-attachment: scroll;
							}
			a:hover { color: #ff0179; }
		</style>
		
	</head>
	
	<body>

		<div id="wrapper">

			<div id="content">
			
				<div id="masthead" class="fix" style="height:50px;">
				
				<h1><a href="http://beta.gdnm.org/">GDNM *beta</a></h1>
				
					<div id="authorBlurb">
											</div>
				
				</div>
				
				<ul class="nav fix">
					<li><a href="http://gdnm.org">Home<br /><span>Site Home</span></a></li>
					<li><a href="javascript:toggleDiv('gdmenu');">GD<br /><span>GD Blogs</span></a></li>
					<li><a href="javascript:toggleDiv('gdnmmenu');">GDNM<br /><span>GDNM blogs</span></a></li>
					<li><a href="http://forum.gdnm.org">Forum<br /><span>the forums</span></a></li>
				
											<li class="skip"><a href="/wp-login.php?action=logout">Logout<br /><span>log me out</span></a></li>
									
				</ul>
				
				<div id="gdmenu" class="fix" style="display: none;">
				
					<ul class="fix">
						<li><a href="http://gd.gdnm.org/category/year-0">Year 0</a></li>
						<li><a href="http://gd.gdnm.org/category/year-1">Year 1</a></li>
						<li><a href="http://gd.gdnm.org/category/year-2">Year 2</a></li>
						<li><a href="http://gd.gdnm.org/category/year-3">Year 3</a></li>
						<li><a href="http://gd.gdnm.org/category/typography-club">Typography Club</a></li>
					</ul>
				
				</div>
				
				<div id="gdnmmenu" class="fix" style="display: none;">
				
					<ul class="fix">
						<li><a href="http://year0.gdnm.org/">Year 0</a></li>
						<li><a href="http://year1.gdnm.org/">Year 1</a></li>
						<li><a href="http://year2.gdnm.org/">Year 2</a></li>
						<li><a href="http://year3.gdnm.org/">Year 3</a></li>
					</ul>
				
				</div>
<div id="mid" class="fix">

	<div id="mainCol" class="fix"><a name="main"></a>

	
			
			<div class="post" id="post-13">
	
				<div class="postMeta">
					<span class="date">Dec 8 2008</span>
					<span class="comments"><a href="http://beta.gdnm.org/2008/12/08/notice/#comments" title="Comment on NOTICE">1</a></span>				</div>
	
				<h2><a href="http://beta.gdnm.org/2008/12/08/notice/" title="NOTICE">NOTICE</a></h2>
	
				<div class="entry">
	
				  <p><strong>This blog is a testing area for gdnm.org themes where we can experiment without breaking the theme used on the rest of the site.</strong></p>
	
				</div>
	
			</div>

			
			<div class="post" id="post-8">
	
				<div class="postMeta">
					<span class="date">Dec 8 2008</span>
									</div>
	
				<h2><a href="http://beta.gdnm.org/2008/12/08/8/" title=""></a></h2>
	
				<div class="entry">
	
				  <p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="428" height="241" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=2164626&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff0179&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="428" height="241" src="http://vimeo.com/moogaloop.swf?clip_id=2164626&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff0179&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
	
				</div>
	
			</div>

			
			<div class="post" id="post-4">
	
				<div class="postMeta">
					<span class="date">Dec 8 2008</span>
					<span class="comments"><a href="http://beta.gdnm.org/2008/12/08/4/#respond" title="Comment on ">0</a></span>				</div>
	
				<h2><a href="http://beta.gdnm.org/2008/12/08/4/" title=""></a></h2>
	
				<div class="entry">
	
				  <p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="428" height="241" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=1737450&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff0179&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="428" height="241" src="http://vimeo.com/moogaloop.swf?clip_id=1737450&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=ff0179&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
	
				</div>
	
			</div>

		
		
		<div id="more_reading">

		<p style="float:left;"></p>

		<p></p>

		</div>

	</div>

	<div id="midCol">
	
		    <div id="searchWrap">
		<form method="get" id="searchForm" action="http://beta.gdnm.org/">
			<input type="text" value="" name="s" id="s" /><input id="searchsubmit" type="image" src="http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/images/btn_search.gif" onMouseOver="javascript:swap('searchsubmit', 'http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/images/btn_search_pink.gif');" onMouseOut="javascript:swap('searchsubmit', 'http://beta.gdnm.org/wp-content/themes/gdnm.org_2.2/images/btn_search.gif');" alt="Submit" />
		</form>
		</div>		<div class="middle_links">			<h3>Meta</h3>			<ul>
			<li><a href="http://beta.gdnm.org/wp-admin/">Site Admin</a></li>			<li><a href="http://beta.gdnm.org/wp-login.php?action=logout">Log out</a></li>
			<li><a href="http://beta.gdnm.org/feed/" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
			<li><a href="http://beta.gdnm.org/comments/feed/" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
			<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
						</ul>
		</div>		<div class="middle_links">			<h3>Quick Blogs</h3>			<div class="textwidget"><ul>

<li><a href="http://year0.gdnm.org" target="_blank">GDNM Year 0</a></li>

<li><a href="http://year1.gdnm.org" target="_blank">GDNM Year 1</a></li>

<li><a href="http://year2.gdnm.org" target="_blank">GDNM Year 2</a></li>

<li><a href="http://year3.gdnm.org" target="_blank">GDNM Year 3</a></li>

</ul></div>
		</div>		<div class="middle_links">			<h3>Tutors Sites</h3>			<div class="textwidget"><ul>

<li><a href="http://www.benstopher.com" target="_blank">Ben Stopher .com</a></li>

<li><a href="http://www.inventivereception.com" target="_blank">Matt Galvin
<br />Inventive Reception .com</a></li>

<li><a href="http://www.theimagesurgery.com/" target="_blank">Simon Last
<br />The Image Surgery .com</a></li>

<li><a href="http://www.marcusoakley.com/" target="_blank">Marcus Oakley .com</a></li>

<li><a href="http://www.garethholt.com/" target="_blank">Gareth Holt .com</a></li>


</ul>


</div>
		</div>
		
</div>	<div id="tertCol">
	
	<div class="middle_links"><h3><a href="http://thelink.benstopher.com">The_Link</a></h3><ul>

<li><a href="http://feedproxy.google.com/~r/ch/~3/wtXyXL-QG5A/hope_in_the_whi.php" target="_blank"> Hope In The White House </a></li>


<li><a href="http://www.coolhunting.com/archives/2009/01/hope_in_the_whi.php" target="_blank"> Hope In The White House </a></li>


<li><a href="http://www.coolhunting.com/archives/2009/01/cinema16_world.php" target="_blank"> Cinema16: World Short Films DVD </a></li>


<li><a href="http://www.coolhunting.com/archives/2009/01/incase_macbook.php" target="_blank"> Incase MacBook Air Hardshell Case </a></li>


<li><a href="http://www.coolhunting.com/archives/2009/01/namelessletter.php" target="_blank"> NamelessleTTer Project </a></li>


<li><a href="http://www.coolhunting.com/archives/2009/01/mythtym.php" target="_blank"> Trinie Dalton: Mythtym </a></li>


<li><a href="http://www.coolhunting.com/archives/2009/01/justin_gabbard.php" target="_blank"> Illustrator Justin Gabbard </a></li>


<li><a href="http://feeds.feedburner.com/~r/CoudalFreshSignals/~3/515746538/photos_from_the_1.php" target="_blank"> Photos from the Land O' Lincoln </a></li>


<li><a href="http://feeds.feedburner.com/~r/CoudalFreshSignals/~3/515729522/teaser_trailer_14.php" target="_blank"> Teaser trailer for 500 Days of Summer </a></li>


<li><a href="http://www.we-make-money-not-art.com/archives/2009/01/back-in-october-2007-when.php" target="_blank">  The Office of Community Sousveillance  </a></li>
	
<br />
</ul></div>		<div class="middle_links">			<h3>Friends of GDNM</h3>			<div class="textwidget"><ul>

<li><a href="http://www.mcfaul.net" target="_blank">McFaul</a></li>

<li><a href="http://www.sennep.com" target="_blank">Sennep</a></li>

<li><a href="http://www.bcmh.com" target="_blank">BC, MH</a></li>

</ul></div>
		</div>
		
</div>
</div>

	
				<p class="footnote">Thank you to all who have <a href="http://gdnm.org/credits/">contributed</a> to this site</p>
	
			</div>
			
		</div>
		
		
				<!-- WordPress Mu Google Analytics by Rafik : http://themajesty.asslema.net/ Translated by George Abhishek Cherian : http://www.be-lifted.com/ -->

				<script type="text/javascript">
				var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
				document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
				</script>
				<script type="text/javascript">
				var pageTracker = _gat._getTracker("UA-1691648-2");
				pageTracker._trackPageview();
				</script> 
				
	</body>

</html>

Code: 
/*  
Theme Name: GDNM 2.2
Theme URI: http://gdnm.org/
Description: Originally known as Grid Focus modified for GDNM.org to include... Gravatars,
 Widgets,
 Rollovers,
 Script.aculo.us menu,
 and a Theme Options page.
Author: Derek Punsalan (modified by Tom Lynch)
Author URI: http://is.derekpunsalan.com/
*/

* {
	margin:0;
	padding:0;
}

body {
	font:12px arial, helvetica, verdana, sans-serif;
	color:#333;
	text-align:center;
}

h1 {
	font-size:22px;
}

h2 {
	font-size:18px;
}

h3 {
	font-size:16px;
}

h4 {
	font-size:14px;
}

a {
	color:#333;
	text-decoration:none;
}

#wrapper {
	background-color: white;
	text-align:left;
	width:870px;
	padding: 12px;
	margin: 0px auto;
}

#masthead {
	padding:5px 0;
}

#masthead h1 a {
	text-transform:uppercase;
	width:400px;
	float:left;
	margin:12px 0 0;
}

#masthead h1 a em {
	font-style:normal;
	color:#555;
}

#authorBlurb img {
	float:right;
	width:42px;
	height:42px;
	border:3px solid #EEE;
}

#authorIntro {
	line-height:1.4em;
	width:400px;
	float:right;
	margin:8px 0 0;
}

ul.nav {
	list-style:none;
	border-left: 1px dotted #ddd;
	border-right: 1px dotted #ddd;
}

.nav li {
	border-right:1px dotted #DDD;
	float:left;
	display:block;
	width:106px;
}

.nav li a {
	font-size:11px;
	outline:none;
	color:#333;
	text-decoration:none;
	display:block;
	width:106px;
	text-transform:uppercase;
	margin:5px 0 12px 5px;
}

.nav li a span {
	font-size:11px;
	color:#777;
	text-transform:lowercase;
}

.nav li.skip {
	border-right:none;
	border-left:1px dotted #DDD;
	float:right;
	display:block;
	width:104px;
}

li.top {
	border-left:1px solid #DDD;
	float:right;
	display:block;
	width:106px;
	border-right:none;
}

#mainCol {
	float:left;
	width:429px;
	margin:26px 0 0;
}

.mu_register {
	width:435px;
	margin:26px 0;
}

#gdmenu ul,
#gdnmmenu ul {
	list-style:none;
	padding:5px 0 3px;
	margin-top: 1px;
}

#gdmenu li,
#gdnmmenu li {
	float:left;
	display:block;
}

#gdmenu li a,
#gdnmmenu li a {
	display:block;
	margin:2px 0 4px 12px;
}

#gdmenu li a:hover,
#gdnmmenu li a:hover {
	color:#EEE;
}

#midCol {
	color:#444;
	float:left;
	width:209px;
	line-height:1.3em;
	margin:24px 0 0 12px;
}

#searchWrap,
.middle_links {
	margin-bottom:20px;
}

#searchWrap #s {
	font-size:1.1em;
	border:1px solid #BBB;
	margin-right:3px;
	width:182px;
	padding:1px 2px;
}

#midCol ul {
	list-style:none;
	margin:8px 0 4px;
}

.middle_links ul li {
	list-style:none;
	color:#7F7F7F;
	line-height:1.2em;
	border-top:1px solid #BBB;
	padding:4px 0;
}

#tertCol {
	color:#444;
	float:left;
	width:208px;
	margin:24px 0 0 12px;
}

#terCol li {
	list-style:none;
}

#elseWhere {
	margin:0 0 20px;
}

ul#imgLinks {
	list-style:none;
	margin:7px 0;
}

#imgLinks li {
	color:#7F7F7F;
	line-height:1.2em;
	padding:0 0 1px;
}

#imgLinks li a img {
	border:3px solid #EEE;
	width:208px;
	height:69px;
	color:#333;
	font-weight:700;
}

#imgLinks li a:hover img {
	border-color:#DDD;
}

.postMeta {
	background:url(images/dot.gif) repeat-x left center;
	text-transform:uppercase;
	font-size:11px;
	text-align:right;
	margin-bottom:5px;
}

.postMeta span.date {
	background:#FFF;
	color:#7F7F7F;
	padding:0 2px 0 2px;
}

.postMeta span.comments {
	background:#FFF url(images/chat_grey.gif) no-repeat left center;
	padding-left:2px;
}

.postMeta span.comments a {
	padding-left:15px;
}

.postMeta span.comments:hover {
	background:#FFF url(images/chat_pink.gif) no-repeat left center;
}

.postMeta span.comments a,
.postMeta span.date a {
	color:#555;
}

.post {
	margin:0 0 15px;
}

.post h2 {
	line-height:1.2em;
	margin-bottom:7px;
}

.post h2 a {
	width:100%;
	display:block;
	outline:none;
}

.post .entry {
	line-height:1.4em;
	overflow:hidden;
}

.post .entry p a {
	background:url(images/dot.gif) repeat-x bottom left;
	font-weight:700;
}

.entry blockquote {
	margin:0 1.3em;
}

.entry ul {
	list-style:none;
	margin:0 1.3em;
}

.entry li a {
	color:#333;
	font-weight:700;
	background:url(images/dot.gif) repeat-x bottom left;
}

.entry ul li {
	background:url(images/li.gif) no-repeat 0 1px;
	padding-left:18px;
	margin-bottom:7px;
}

.entry ol {
	margin:0 1em 0 3em;
}

.entry ol li {
	margin:0 0 7px;
}

.entry img,
.entry a img {
	border:3px solid #EEE;
}

.entry a:hover img {
	border-color:#DFDFDF;
}

.entry table tr {
	padding:15px 0;
}

.entry table tr.alt {
	background:#eee;
}

#more_reading {
	color:#7F7F7F;
	font-size:11px;
	text-transform:uppercase;
	margin-bottom:25px;
	text-align:right;
}

#more_reading a img {
	border:none;
	margin:0 0 3px 2px;
}

#comments {
	width:423px;
	padding:12px 0 0;
}

#comments h3,
h3#respond {
	color:#555;
	margin-bottom:7px;
}

ol.commentslist {
	list-style:none;
	margin:5px 0 12px;
}

.commentslist li {
	background-color:#F7F7F7;
	margin-bottom:7px;
	padding:7px 0;
}

.commentslist li.alt {
	background:#FFF;
}

.commentslist li:hover {
	border-color:#888;
}

.commentslist .comment_text {
	clear:left;
	line-height:1.4em;
	overflow:hidden;
	margin:0 7px;
}

.comment_text ul,
.comment_text ol,
.comment_text blockquote {
	margin:0 1em;
}

p.author_meta {
	float:left;
	font-weight:700;
	text-transform:uppercase;
	margin:0 0 0 7px;
}

p.post_meta {
	float:right;
	font-size:9px;
	text-transform:uppercase;
	margin:0 7px 0 0;
}

.commentslist li.author {
	background:#333;
	color:#CCC;
}

.commentslist li.author a {
	color:#DDD;
}

#comments_closed {
	background:#333;
	color:#ccc;
	margin-top:12px;
	line-height:1.5em;
	padding:7px 0;
}

p.nocomments {
	margin:0 12px 0 7px;
}

p.nocomments a {
	color:#ddd;
	font-weight:700;
	text-decoration:underline;
}

ol.pingslist {
	font-size:12px;
	margin:1.5em 2em;
}

.pingslist li {
	color:#7F7F7F;
	margin:0 0 7px;
}

#author,
#email,
#url,
#comment {
	font:1.1em arial, helvetica, verdana, sans-serif;
	border:1px solid #BBB;
	padding:2px;
}

#comment {
	width:423px;
	overflow:auto;
}

img.avatar {
	clear:none;
	float:left;
	margin:0 0 0 7px;
}

#commentform p small {
	font-size:10px;
	color:#7F7F7F;
}

.commentslist code {
	background:transparent;
}

#comments_wrapper {
	margin-bottom:26px;
}

p.footnote {
	font-size:8pt;
	color:grey;
	text-align:left;
	margin:16px 0 0 0;
}

.floatleft {
	float:left;
	margin:3px 7px 0 0;
}

.floatright {
	float:right;
	margin:3px 0 0 7px;
}

.right {
	float:right;
}

.left {
	float:left;
}

.clear {
	clear:both;
}

.fix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.fix {
	display:block;
}

* html .fix {
	height:1%;
}

a:hover,
.postMeta span.comments a:hover {
	color:#ea018c;
}

#authorIntro a,
#midCol a {
	font-weight:700;
}

.nav li a:hover {
	color: #ea018c !important;
}

#gdmenu,
#gdnmmenu {
	border: 1px dotted #ddd;
	border-top: none;
}

.nav li.skip a,
li.top a {
	width:104px;
}

#midCol p,
#tertCol p {
	color:#777;
}

#searchWrap input,
#more_reading p,
#more_reading img {
	vertical-align:middle;
}

.middle_links h3,
#elseWhere h3 {
	margin-bottom:7px;
}

.entry h3,
.post .entry p,
.comment_text p,
.comment_text ul,
.comment_text ol,
.comment_text blockquote,
#commentform p {
	margin:1em 0;
}

.commentslist li a,
.pingslist li a,
#commentform p a {
	font-weight:700;
	background:url(images/dot.gif) repeat-x bottom left;
}

.commentslist li.author a:hover,
p.nocomments a:hover {
	color:#FFF;
}

#recaptcha-submit-btn-area {
	padding-top: 12px;
}

#recaptcha_widget_div {
	margin-left: -2px;
}

#author, #email, #url {
	width: 203px;
}

hr {
	border: none;
	padding: 0;
	margin: 0;
	background:url(images/dot.gif) repeat-x left center;
}
 
t31os and Dj Jestar your both right, and thanks, thats what happens at 2.37 am :p

EDIT: the scroll bars were caused by padding: 12px which i changed to padding: 0 12px; as theres no need for padding on the top and bottom :P
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom