Sidebar stays left and content/posts right

  • Hi there,

    I added a large background image to a new blog. For this reason I gave the wrapper a 100% value and changed some other stuff as well.

    The background looks good, the wrapper has a white background image in the center of the page with a photo next to iy, but … the sidebar is as left as can be and the content too much at the right side of the page. However the sidebar and the content come closer whenever I give the wrapper something like 900px instead of the 100% so I guess it might have something to do with the wrapper. The wrapper is so large now because of the background image. However I really can’t find a way to get it all back together.

    Here is my header:

    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

    <title><?php
    $replacethese = array(‘[‘,’]’);
    $replacewith = array(‘ ‘,’ ‘);
    echo str_replace($replacethese, $replacewith, get_bloginfo(‘title’)); ?>

    <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> » <?php wp_title(”); ?><?php } ?></title>

    <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    <?php wp_head(); ?>

    <?php $url = get_stylesheet_directory_uri()?>
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php echo $url; ?>/imagemenu/imageMenu.css”>
    <script type=”text/javascript” src=”<?php echo $url; ?>/imagemenu/mootools.js”></script>
    <script type=”text/javascript” src=”<?php echo $url; ?>/imagemenu/imageMenu.js”></script>

    <div id=”wrapper”>

    <div id=”welcomeheading”>

    </div>

    <div class=”description”><?php bloginfo(‘description’); ?></div>

    <?php if( (is_home()) or (is_category()) or (is_page())) { ?>

    <div align=”center”><img src=”images/file-logo.png” alt=””/></div>

    <div id=”imageMenu”>

    </div>

    <script type=”text/javascript”>

    window.addEvent(‘domready’, function(){
    var myMenu = new ImageMenu($$(‘#imageMenu a’),{openWidth:310, border:2, onOpen:function(e,i){location=(e);}});
    });
    </script>

    <?php } ?>

    </head>

    <body>

    And here the first half of my style.css:

    * { margin: 0; padding: 0; list-style: none; }

    body {
    background: #1c1a1b;
    margin: 0px;
    font: Normal 13px Helvetica, Arial, sans-serif;
    color:#333;
    text-align:center;

    }

    body a {
    color: #002d2f;
    }

    #upperBar {
    height: 0px;
    background: #01bcff;
    }

    #wrapper {
    background: url(https://localhost/wordpress/images/corkboard-top-bg02.png) no-repeat center top;
    width: 100%;
    display: table;
    margin: 0 auto;
    text-align: left;
    position: relative;

    }

    #welcomeheading a {
    margin-bottom: 10px;
    padding-bottom: 15px;
    font: 40pt “Trebuchet MS”, “Lucida Grande”, Lucida, Vernada, sans-serif;
    padding-top: 10px;
    color: #ffffff;
    text-decoration: none;
    }

    #welcomeheading {
    margin:60px 0px; padding:20px;
    text-align: center;
    }

    #welcomeheading a:hover {
    color: #aaa;
    }

    #middleword {
    color: #909090;
    }

    #welcomeheading a:hover #middleword {
    color: #fff;
    }

    .description {
    text-align: center;
    font: normal 14px Verdana, Helvetica, Sans-serif;
    color: #fff;
    padding-bottom: -20px;
    }

    #content {

    float: right;
    width: 640px;
    margin-top: 0px;
    }

    #content .notice p {
    border-top: 1px solid #8acef3;
    border-bottom: 1px solid #8acef3;
    padding: 5px 0px;
    font-size: 12px;
    margin: 1px;
    }
    #content .notice {
    border-top: 1px solid #2d7cb9;
    border-bottom: 1px solid #2d7cb9;
    margin-bottom: 20px;
    }

    #content .post {
    float: left;
    position: relative;
    width: 550px;

    }

    #content .post h2 a {
    color: #002d2f;
    text-decoration: none;
    padding: 3px 0;
    }

    #content .post h2 a:hover {
    color: #002d2f;
    }

    #content .post h3 {
    font-size: 12px;
    font-weight: normal;
    color: #999;

    }

    #content .post h3 a {
    color: #999;
    }

    #content .post h3 a:hover {
    text-decoration: none;
    }

    #content .post img {
    max-width: 450px;
    max-height: 600px;
    margin-bottom: 10px;
    margin-top: 10px;

    }

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #002d2f;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    Any CSS specialists out there who can help me out?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter modp

    (@modp)

    Although this problem kept me busy for half a day I’ve now solved it by myself.

    So the sidebar and the content were totally separated … one at the left, the other one at the right … because the wrapper was on 100% (and something else … just can’t figure out what it was). When I changed the wrapper to 750px I couldn’t see my wrapper image anymore. But when I added the same URL to the background, the image appeared again and it works all fine now when I resize the browser window. Perfect, I’m happy!

    Thread Starter modp

    (@modp)

    body {
    background: #1c1a1b url(https://localhost/wordpress/images/corkboard-top-bg02.png) no-repeat center top;
    margin: 0px;
    font: Normal 13px Helvetica, Arial, sans-serif;
    color:#333;
    text-align:center;

    }

    body a {
    color: #002d2f;
    }

    #upperBar {
    height: 0px;
    background: #01bcff;
    }

    #wrapper {
    background: url(https://localhost/wordpress/images/corkboard-top-bg02.png) no-repeat center top;
    width: 750px;
    display: table;
    margin: 0 auto;
    text-align: left;
    position: relative;

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sidebar stays left and content/posts right’ is closed to new replies.