/    Sign up×
Community /Pin to ProfileBookmark

Background not showing right

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/
[/URL]
)
[B]CSS[/B]

[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;
}[/CODE]

[B]HTML[/B]

[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>[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@skywalker2208Jan 12.2010 — It is because of all your float: left that you have assigned to each post. Also, you have id="post" for every post. The id element needs to be a unique name. Once you have used that name you shouldn't use it again.
Copy linkTweet thisAlerts:
@middo1985authorJan 12.2010 — Thanks! Got it sorted ?

Now onto the next issue ?
×

Success!

Help @middo1985 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...