Thanks everyone for your help with getting my div’s centered.
I have just about finished coding my wordpress theme but have come up with a problem. I want to have my theme set so each INDIVIDUAL wordpress post has a white background (with 10px of the maincontent background colour showing at the bottom). I have set up a div called ‘post’ around EVERYTHING that makes up one individual post, starting it before and closing it after and then set the background colour to white. Only problem is the white background is only showing up as 10px high background and NOT encompassing each individual post.
Anyone able to help?
(PS check it out on my dummy site [URL=”http://test.aussiegreenthumb.com/”]http://test.aussiegreenthumb.com/
[B]CSS
[CODE]/*
Theme Name: Special blue
Version: 1.0
Author: James Middleton
Author URL: http://discipleoftheway.aussiegreenthumb.com/
*/
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}
body{
font-family: georgia, serif;
font-size: 14px;
vertical-align: top;
text-align: center;
background: #fff;
color: #333333;
}
table{
font-family: georgia, serif;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6{
font-family: “trebuchet ms”, verdana;
font-weight: bold;
}
h1{
font-size: 24px;
}
h2{
font-size: 22px;
}
h3, h4, h5{
font-size: 18px;
}
h6{
display: none;
}
a{
text-decoration: underline;
color: #5C76A2;
}
a:hover{
text-decoration: none;
}
a img{
border: 0;
}
p{
padding: 10px 0 5px 0;
}
blockquote{
margin: 10px 0 0 0;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background: #f5f5f5;
}
blockquote p{
padding: 10px;
}
blockquote blockquote{
float: none;
width: auto;
margin: 0 10px;
background: #fff;
border-bottom: 2px solid #ddd;
}
dd{
padding: 0 0 0 20px;
}
form, input, textarea{
font-family: georgia, serif;
font-size: 14px;
}
p img{
max-width: 100%;
}
img.centered{
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright{
margin: 0px 0px 10px 10px;
padding: 0px;
display: inline;
}
img.alignleft{
margin: 0px 10px 10px 0px;
padding: 0px;
display: inline;
}
small{
font-size: 12px;
}
.alignleft{
margin: 0px 10px 10px 0px;
float: left;
}
.alignright{
margin: 0px 0px 10px 10px;
float: right;
}
.clear{
margin: 0;
padding: 0;
clear: both;
}
#wrapper{
width: 880px;
margin: 0 auto;
text-align: left;
background: #86ACEC;
}
#navbarcontainer{
width: 880px;
background: #1e448a;
float: left;
}
#navbar{
width: 880px;
background: #1e448a;
font-weight: bold;
list-style-type: none;
}
#navbar ul{
list-style: none;
background: #1e448a;
margin: 0;
padding: 0;
}
#navbar ul li{
display: inline;
padding: 0;
margin: 0;
float: left;
background: #1e448a;
}
#navbar ul li a{
display: block;
padding: 8px 10px 8px 10px;
text-decoration: none;
color: #ffffff;
border-right: 1px solid #fff;
}
#navbar ul a:hover{
text-decoration: underline;
}
#headcontainer{
width: 880px;
float: left;
background: #fff;
}
#title{
width: 570px;
float: left;
padding: 10px 0 10px 0;
}
#subscribesearch{
width: 310px;
float: left;
}
#subscribe{
width: 300px;
float: left;
background: #e7e7e7;
padding: 2px 0px 0 4px;
margin: 8px 5px 5px 0;
}
#subscribe img{
float: right;
padding: 5px 5px 0px 0px;
}
#searchbox{
width: 305px;
float: left;
margin: 5px 0 10px 0;
padding: 0 0 0 5px;
}
#blueback{
width: 880px;
float: left;
background: #1E448A;
}
#maincontent{
width: 570px;
float: left;
background: #86ACEC;
}
#post{
width: 530px;
margin: 10px 0 10px 10px;
padding: 10px;
font-family: georgia, serif;
font-size: 14px;
background: #fff;
}
.post-top{
font-weight: bold;
font-size: 12px;
width: 540px;
float: left;
}
.post-date{
float: left;
width: 30px;
display: inline;
padding: 5px 5px 5px 2px;
margin: 5px 5px 0 0px;
background: url(images/postdatebackground.jpg) no-repeat;
}
.month{
font-family: georgia, serif;
font-weight: bold;
font-size: 12px;
}
.day{
font-family: georgia, serif;
font-weight: bold;
font-size: 14px;
}
.titlecategories{
width: 490px;
float: left;
}
.post-title{
float: left;
width: 500px;
}
.post-categories{
width: 500px;
float: left;
}
.post-content{
float: left;
width: 545px;
}
.thepost{
float: left;
width: 540px;
}
.post-bottom{
font-weight: bold;
font-size: 12px;
float: left;
width: 545px;
margin: 0 0 20px 0;
}
.post-navigation{
width: 530px;
margin: 10px 0 0 10px;
padding: 10px;
font-family: georgia, serif;
font-size: 14px;
background: #1E448A;
float: left;
}
.post-navigation a{
color: #fff;
}
#sidebar{
width: 310px;
float: left;
background: #1E448A;
}
#footer{
width: 880px;
float: left;
background: #86ACEC;
}
[B]HTML
[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″>
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<meta name=”generator” content=”WordPress<?php bloginfo(‘version’); ?>” /> <!– leave this for stats please –>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body style=”background: #cccccc;”>
<div id=”wrapper”>
<div id=”navbarcontainer”>
<div id=”navbar”>
<ul>
<?php wp_list_pages(‘depth=1&title_li=’); ?>
</ul>
</div>
</div>
<div id=”headcontainer”>
<h6><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h6>
<div id=”title”>
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘title’) ) : ?>
<?php endif; ?>
</div>
<div id=”subscribesearch”>
<div id=”subscribe”>
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘subscribe’) ) : ?>
<?php endif; ?>
</div>
<div id=”searchbox”>
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘searchbox’) ) : ?>
<?php endif; ?>
</div>
</div>
</div>
<div id=”blueback”>
<div id=”maincontent”>
<?php if(have_posts()):?><?php while(have_posts()):the_post(); ?>
<div id=”post”>
<div class=”post-top”>
<div class=”post-date”>
<div class=”month”><?php the_time(“M”) ?></div>
<div class=”day”><?php the_time(“d”) ?></div>
</div>
<div class=”titlecategories”>
<div class=”post-title”>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>
</div>
<div class=”post-categories”>
| Categories: <?php the_category(‘,’) ?> | Leave a comment:
<?php comments_popup_link(‘Be First!’, ‘1 Comment’, ‘% Comments’); ?> |
</div>
</div>
</div>
<div class=”post-content”>
<div class=”thepost”>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link(‘Edit’,'<p>’,'</p>’); ?>
</div>
</div>
<div class=”post-bottom”>
| Posted on <?php the_time(‘F jS, Y’); ?> by <?php the_author(); ?> | Leave a comment: <?php comments_popup_link(‘Be First!’, ‘1 Comment’, ‘% Comments’); ?> |
</div>
</div>
<?php endwhile; ?>
<div class=”post-navigation”><?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<div id=”sidebar”>
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘sidebar’) ) : ?>
<?php endif; ?>
</div>
<div id=”footer”>
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(‘footer’) ) : ?>
<?php endif; ?>
</div>
<?php wp_footer(); ?>
</div>
</div>
</body>
</html>