Forums

LaurelBrittany

The sidebar keeps going inside of the content div or outside of the footer. I've been having trouble with this for months and can't figure it out This is the homepage:

<!DOCTYPE html>
<html lang="en">
<head>
<title>The Avocado Girl</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<?php wp_head(); ?>
</head>
<body>
<header>  
  <div class="wrapper">
  <div id="titlebar">

  <img id="logo" src="<?php bloginfo('stylesheet_directory'); ?>/images/avocado.png" width="102" height="112" alt="avocado girl" />
  <img id="title" src="<?php bloginfo('stylesheet_directory'); ?>/images/title.png" width="496" height="46" alt="TheAvocadoGirl.Com" />
  <div class="clear"></div>

  </div><!-- end titlebar --> 
  </div><!-- end wrapper -->

</header> 
<div class="wrapper">
  <div id="nav">
         <?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>  
  </div><!-- end nav -->
  </div><!-- end wrapper -->
  <div class="wrapper">
  <div id="content">
        <?php get_header(); ?>  
<?php if ( ! have_posts() ) : ?>  
            <h1>Not Found</h1>  
                <p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p>  
    <?php endif; ?>  
      
    <?php while ( have_posts() ) : the_post(); ?> 
  <div class="article">
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
  <span class="date"><?php the_date(); ?></span>
  </a>
 <?php the_excerpt(); ?>  
    <div class="meta">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/tag.png" width="15" height="13" alt="tags" /><span class="tags"><?php the_tags(); ?></span>
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/category.png" width="15" height="14" alt="categories" /><span class="categories"><?php the_category(', '); ?></span> </span>
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/comments.png" width="20" height="15" alt="Comments" /><span class="comments"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
    </div>
</div> <!-- end article -->

<?php endwhile; ?> 
<div class="clear"></div>
    <?php if ( $wp_query->max_num_pages > 1 ) : ?>  
        <div id="older-posts"><?php next_posts_link('Older Posts'); ?></div>  
        <div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div>  
<?php else: ?>  
        <div id="only-page">No newer/older posts</div>  
    </div><!--end content -->
<?php endif; ?>

    <?php get_footer(); ?>  
  
  <div id="sidebar">
     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>  
     <?php endif; ?>
   </div><!-- end sidebar -->
  </div><!-- end wrapper -->
<?php get_sidebar(); ?> 
  </div><!-- end wrapper -->
  <div class="clear"></div>
<footer>
  <div class="wrapper">
     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("footer") ) : ?>  
     <?php endif; ?>
    <span id="copyright">Copyright &copy; 2013</span>
  </div><!-- end wrapper -->
        <?php wp_footer(); ?> 
</footer>
</body>
</html>Check out this Pen!

You can view the web site here: http://theavocadogirl.com/

Jarolin

I don't exactly understand your problem. And i'm not sure if this is intentional but the pen is lacking CSS. Can you rephrase your question?

Paulie_D

Take the sidebar div out of the content div but leave it inside the wrapper div that is it's parent....and Robert is your father's brother.

   <div class="wrapper">
           <div id="content">
            </div> <!-- end content div -->
            <div id="sidebar">
           </div> <!-- end sidebar div -->
       </div> <!-- end wrapper div -->

Simples.

LaurelBrittany

This is the single page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>The Avocado Girl</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<?php wp_head(); ?>
</head>
<body>
<header>  
  <div class="wrapper">
  <div id="titlebar">

  <img id="logo" src="<?php bloginfo('stylesheet_directory'); ?>/images/avocado.png" width="102" height="112" alt="avocado girl" />
  <img id="title" src="<?php bloginfo('stylesheet_directory'); ?>/images/title.png" width="496" height="46" alt="TheAvocadoGirl.Com" />
  <div class="clear"></div>

  </div><!-- end titlebar --> 
  </div><!-- end wrapper -->

</header> 
<div class="wrapper">
  <div id="nav">
         <?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>  
  </div><!-- end nav -->
  </div><!-- end wrapper -->
  <div class="wrapper">
  <div id="content">
        <?php get_header(); ?>  

<?php if ( ! have_posts() ) : ?>  
            <h1>Not Found</h1>  
                <p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p>  
    <?php endif; ?>  
      
    <?php while ( have_posts() ) : the_post(); ?> 
  <div class="article">
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
  <span class="date"><?php the_date(); ?></span>
  </a>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>  
            <?php the_excerpt(); ?>  
    <?php else : ?>  
            <?php the_content('Read More'); ?>  
    <?php endif; ?>  
    <div class="meta">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/tag.png" width="15" height="13" alt="tags" /><span class="tags"><?php the_tags(); ?></span>
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/category.png" width="15" height="14" alt="categories" /><span class="categories"><?php the_category(', '); ?></span> </span>
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/comments.png" width="20" height="15" alt="Comments" /><span class="comments"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
    </div>
<?php comments_template( '', true ); ?>  
</div>

<?php endwhile; ?> 
<div class="clear"></div>
    <?php if ( $wp_query->max_num_pages > 1 ) : ?>  
        <div id="older-posts"><?php next_posts_link('Older Posts'); ?></div>  
        <div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div>  
<?php else: ?>  
        <div id="only-page">No newer/older posts</div>  
<?php endif; ?>
</div><!--end content -->
    <?php get_footer(); ?>  
  
  <div id="sidebar">
     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar") ) : ?>  
     <?php endif; ?>
   </div><!-- end sidebar -->
  </div><!-- end wrapper -->
<?php get_sidebar(); ?> 
  </div><!-- end wrapper -->
  <div class="clear"></div>
<footer>
  <div class="wrapper">
     <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("footer") ) : ?>  
     <?php endif; ?>
    <span id="copyright">Copyright &copy; 2013</span>
  </div><!-- end wrapper -->
        <?php wp_footer(); ?> 
</footer>
</body>
</html>Check out this Pen!

LaurelBrittany

Why would I take the sidebar div outside of the wrapper div?

LaurelBrittany

I got the index page using what you said Paulie. But it destroys the single page.

Paulie_D

Sorry...I was editing my comment.

Not wrapper div...content div...see the updated comment.

   <div class="wrapper">
           <div id="content">
            </div> <!-- end content div -->
            <div id="sidebar">
           </div> <!-- end sidebar div -->
       </div> <!-- end wrapper div -->

LaurelBrittany

I know what it should look like. But it isn't working when i make it that way.

LaurelBrittany

Oddly enough, your original comment fixed the home page.

Paulie_D

Using Chrome developer tools I dragged the sidebar div out of the content div and put it at the bottom (not underneath) of the wrapper.

Bingo.

LaurelBrittany

If you look at the code you can clearly see that the sidebar is not inside of the content div.

LaurelBrittany

Can you send me the code for what you did that apparently works?

Paulie_D

If you look at the code you can clearly see that the sidebar is not inside of the content div.

It was...but not now.

Anyway...it's working so YVW.

LaurelBrittany

No, the single page is not working. http://theavocadogirl.com/2013/02/mock-refried-beans/

Paulie_D

Well it is on the home page you linked where it wasn't before...I didn't look any further.

I'm guessing that has a different template.

You seem to have a mixture.

LaurelBrittany

The template is identical. I posted the code up above if you care to look at it and help.

Paulie_D

If that were the case the each page would have the same HTML structure...and it doesn't.

The homepage is clearly different from the recipes pages.

On the recipes page the sidebar is inside the content div

On the home page the sidebar is inside the parent wrapper but NOT the content div

LaurelBrittany

The recipe page is the same as every other page. And it is identical to the single page. This is a very simple design. If you can't figure out what is wrong with those pages stop commenting. I know what the problem is. I want to know why it is that way.

Paulie_D

I can't say any more....however the HTML is being created (presumably by PHP) then it's chucking out two versions....why I don't know...but the structure of the pages IS different.

You only have to look at them to see that.

LaurelBrittany

If you have no experience with php dynamically generated pages or wordpress there is no point in trying to figure those out. You have merely stated the obvious.

Paulie_D

I gave you the resolution to the original issue (sidebar positioning).

However, since you have decided to start another thread about the actual issue I'll leave this one and mark it Closed.

treehouse : what would you like to learn today?

Forums

[Closed] Getting Divs to Work For Sidebar