Ok this is driving me nuts

Discussion in 'HTML & Website Design' started by jdomaha, Dec 3, 2007.

0
  1. #1
    I'm trying to set up the basic building blocks of a new WP theme and this problem has pretty much stumped me.

    The body will have a black background, with a wrapper with a lighter color forming the base my blog will sit on.

    I would like the wrapper centered on the body, so that when the browser window is widened, the body background extends the full width of the browser, but the wrapper stays centered and the same size.

    So far, I'm having no luck figuring out what I'm doing wrong.

    The wrapper is staying flush with the left side of the screen and isn't centering within the body.

    Here's the CSS (mostly from Small Potato's WP design tutorial):

    body {
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
    background: #000000;
    color: #ffffff;
    width: 100%;
    }

    a:link, a:visited {
    text-decoration: underline;
    color: #336699;
    }

    a:hover {
    text-decoration: none;
    }

    #wrapper {
    float: left;
    margin: 5px 0 5px auto;
    width: 1010px;
    text-align: left;
    background: #c1c1c1;
    }

    #header {
    float: left;
    width: 1000px;
    }

    #container {
    float: left;
    width: 500px;
    }

    #sidebar {
    float: left;
    width: 440px;
    background: #eeeeee;
    margin: 0 0 0 10px;
    display: inline;
    }

    #footer {
    clear: both;
    float: left;
    width: 1000px;
    }

    And here's the index:

    <!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>

    <div id="wrapper">

    <div id="header">

    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?> </a></h1>
    <?php bloginfo('description'); ?>

    </div>

    <div id="container">

    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">

    <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></h1>

    <div class="entry">

    <?php the_content(); ?>

    <p class="postmetadata">
    <?php _e('Filed under:'); ?> <?php the_category(', ') ?> | <?php comments_popup_link('Leave a Comment »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?><br />
    </p>

    </div>

    </div>

    <?php endwhile; ?>

    <div class="navigation">
    <?php posts_nav_link(); ?>
    </div>

    <?php else : ?>

    <div class="post">
    <h2><?php _e('Not Found'); ?></h2>
    </div>

    <?php endif; ?>

    </div>

    <div id="sidebar">

    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar()) : else : ?>

    <div id="search">
    <?php include(TEMPLATEPATH . '/searchform.php'); ?>
    </div>

    <h3><?php _e('Categories'); ?></h3>
    <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hiera rchical=0'); ?>
    </ul>

    <h3>Archives</h3>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>

    <h3>Meta</h3>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
    </ul>

    <?php endif; ?>

    </div>


    <div id="footer">

    <p>Copyright © 2007 <?php bloginfo('name'); ?></p>

    </div>

    </div>

    </body>
    </html>

    Any help would be hugely appreciated, as I'm NOT GOING TO DO ANYTHING other than play BF2 until I fix this problem.

    Thank you.
     
    jdomaha, Dec 3, 2007 IP