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;
}
 
The height causes your content to overflow outside the container for me (17 inch screen).

The offset i think is due to widths....

#wrapper is 870px wide no padding....

#content also 870px but has 12px padding which = 894px which is the width showing on the page....

The wrapper is set to less then the content DIV... and i'd guess that's where the problem is....

Could be wrong of course...
 
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 can spot small things like using chrome. If you right click on the page you can see the computed, default and user styles set on a page.
 
You must log in or register to reply here.
Back
Top Bottom