Grow your CSS skills. Land your dream job.

[Closed] Getting Divs to Work For Sidebar

  • # February 27, 2013 at 3:47 pm

    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/

    # February 27, 2013 at 3:49 pm

    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?

    # February 27, 2013 at 3:57 pm

    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.


    Simples.

    # February 27, 2013 at 3:58 pm

    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!

    # February 27, 2013 at 3:58 pm

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

    # February 27, 2013 at 3:59 pm

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

    # February 27, 2013 at 4:07 pm

    Sorry…I was editing my comment.

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

    # February 27, 2013 at 4:08 pm

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

    # February 27, 2013 at 4:08 pm

    Oddly enough, your original comment fixed the home page.

    # February 27, 2013 at 4:10 pm

    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.

    # February 27, 2013 at 4:10 pm

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

    # February 27, 2013 at 4:11 pm

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

    # February 27, 2013 at 4:13 pm

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

    # February 27, 2013 at 4:17 pm

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

    # February 27, 2013 at 4:23 pm

    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.

Viewing 15 posts - 1 through 15 (of 21 total)

The topic ‘[Closed] Getting Divs to Work For Sidebar’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".