WordPress.org

Ready to get started?Download WordPress

Forums

left Sidebar is longer than the content (9 posts)

  1. Startingdays
    Member
    Posted 1 year ago #

    Hi @ all. I have a little problem with my own layout. My left sidebar is longer than the content. I´ve tried so many things to fix it, but no result. My div´s are not floated, because the sidebar is totally messing up, when I do this.
    Here is my page: http://www.phelps-twins.com

    Here the code from the index.php

    <?php get_header(); ?>
    
    <div id="page">
    <!--Inhalt-->   
    
    <div id="contentwrapper">
    
    <!--post-->
    <?php query_posts($query_string.'&cat=-3&&order=DESC');
    while (have_posts()) : the_post(); ?>
    <div class="entry" id="post-<?php the_ID(); ?>">
    <p class="datum"><span class="content">Posted by: <?php the_author() ?><br />Tag: <?php the_category(', '); ?>
    <br />Date: <?php the_time('jS, M, Y') ?></span></p>
    <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
    <div style="clear:both;"></div>
    <div class="entry-content">
    <?php the_content(''); ?>
    </div>
    <div class="commentpost"><a href="http://s803.photobucket.com/albums/yy314/chrissy2504/Startingdays/?action=view&current=comments.png" target="_blank"><img src="http://i803.photobucket.com/albums/yy314/chrissy2504/Startingdays/comments.png" border="0" alt="Photobucket"></a> <?php comments_popup_link('0 Comments', '1 Comments', '% Comments'); ?></div>
    </div>
    <!--post-end-->
    
    <?php endwhile; ?>   
    
    <div class="navigation">
    <?php if(function_exists('wp_paginate')) {
        wp_paginate();
    } ?>
    <div id="left-sidebar"><?php get_sidebar('left'); ?> </div>
    <div id="right-sidebar"><?php get_sidebar('right'); ?>	</div>
    <div class="clear"></div>
    </div><!--Inhalt-->
     <?php get_footer(); ?>

    and here from the css:

    #contentwrapper{
    float: center;
    width: 1250px;
    margin-top: 0px;
    padding: 0px;
    overflow: hidden ;}
    
    /*---Footer----*/
    #footer {
    background-image: url(http://i22.photobucket.com/albums/b346/Phelpsaholics/Homepage/Footer2-1.jpg);
    background-repeat: none;
    height: 94px;
    width: 1250px;
    margin: 0 auto;
    clear:both;
    }
    
      /* Div Sidebars */
     div#right-sidebar{
      position:absolute;
      top:0;
      right:32px;
      height:100%;
     }
     div#left-sidebar {
    	 position: absolute;
    	 top:0;
    	 left:35px;
    	 height:100%;}
    
    .footer-text {
    font-family: verdana;
    font-size: 7pt;
    color: #fff;
    text-align: center;
    padding-top: 25px;}

    I hope someone can help me and please don´t write "use a WS3 Validator" or Firebug". That won´t solve my case ;-)

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    This cannot be resolved while positioning absolute, unless a height is added to the #page element.

  3. Startingdays
    Member
    Posted 1 year ago #

    Thank you for your answer. I have changed the css to

    /* Div Sidebars */
     #right-sidebar {
       overflow: hidden;
       float: right;
       position: relative;
        margin-right: 32px;
        padding: 0px 0px 0px 0px;
       display: inline;
      top: 0%;
     }
     #left-sidebar {
    	 overflow: hidden;
       float: left;
       position: relative;
       margin-left: 35px;
       display: inline;
        }

    Its now a better, but the right sidebar appears now under my content.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I'm not experiencing this on Google Chrome 22.0.1229.94.
    Which browser and browser version are you using?

  5. Startingdays
    Member
    Posted 1 year ago #

    Its because I´m using the old css now. The problem is, when you use IE or an other browser, the right sidebar is not in the content.
    http://i22.photobucket.com/albums/b346/Phelpsaholics/IE.jpg

    and when I use the code above it look like this
    http://i22.photobucket.com/albums/b346/Phelpsaholics/new-1.jpg

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try validating your site for errors:

    http://codex.wordpress.org/Validating_a_Website

    You also have a section of code in that page which appears to be keeping the right sidebar out of place -- not clear what that section is doing:

    <div class="navigation">
    <div class="navigation">
    </div>
  7. Startingdays
    Member
    Posted 1 year ago #

    <div class="navigation">
    <div class="navigation">
    </div>

    that was for the wp-pagination and I removed one, but that was not the problem ^^

    I´ve validated my site many times, but couldn´t find a minor problem. Only tags from the plugins are shown with errors. ;-)

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Really? Looks like many other errors:
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.phelps-twins.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Until you've cleaned up the missing/extra, misplaced tag errors, kind of useless to try to solve the layout problems.

    Validate the CSS too.

  9. Startingdays
    Member
    Posted 1 year ago #

    Fixed it.

    <?php get_header(); ?>
    <div id="page">
    <!--Inhalt-->
    <div id="contentwrapper">
    
    <div id="left-sidebar"><?php include (TEMPLATEPATH . '/sidebar-left.php'); ?></div>
    
    <!--post-->
    <?php query_posts($query_string.'&cat=-3&&order=DESC');
    while (have_posts()) : the_post(); ?>
    <div class="entry" id="post-<?php the_ID(); ?>">
    <p class="datum"><span class="content">Posted by: <?php the_author() ?><br />Tag: <?php the_category(', '); ?>
    <br />Date: <?php the_time('jS, M, Y') ?></span></p>
    <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
    <div style="clear:both;"></div>
    <div class="entry-content">
    <?php the_content(''); ?>
    </div>
    <div class="commentpost"><a href="http://s803.photobucket.com/albums/yy314/chrissy2504/Startingdays/?action=view&current=comments.png" target="_blank"><img src="http://i803.photobucket.com/albums/yy314/chrissy2504/Startingdays/comments.png" border="0" alt="Photobucket"></a> <?php comments_popup_link('0 Comments', '1 Comments', '% Comments'); ?></div>
    </div>
    <!--post-end-->
    <?php endwhile; ?>   
    
    </div><?php if(function_exists('wp_paginate')) {
        wp_paginate();
    } ?>
    <div id="right-sidebar"><?php include (TEMPLATEPATH . '/sidebar-right.php'); ?></div></div><!--Inhalt-->
    </div>
    <?php get_footer(); ?>

    and the css to

    /* Div Sidebars */
     #right-sidebar {
       overflow: hidden;
       float: right;
       position: absolute;
       left: 913px;
        top: 0;
     }
     #left-sidebar {
    	 overflow: hidden;
       float: left;
       position: relative;
       margin-left: 35px;
       display: inline;
        }

Topic Closed

This topic has been closed to new replies.

About this Topic