Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Closed] Getting Divs to Work For Sidebar

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #43024
    LaurelBrittany
    Participant

    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/

    #126355
    Anonymous
    Inactive

    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?

    #126358
    Paulie_D
    Member

    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.

    #126359
    LaurelBrittany
    Participant

    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!

    #126360
    LaurelBrittany
    Participant

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

    #126361
    LaurelBrittany
    Participant

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

    #126362
    Paulie_D
    Member

    Sorry…I was editing my comment.

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

    #126363
    LaurelBrittany
    Participant

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

    #126364
    LaurelBrittany
    Participant

    Oddly enough, your original comment fixed the home page.

    #126365
    Paulie_D
    Member

    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.

    #126366
    LaurelBrittany
    Participant

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

    #126367
    LaurelBrittany
    Participant

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

    #126368
    Paulie_D
    Member

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

    #126370
    LaurelBrittany
    Participant

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

    #126371
    Paulie_D
    Member

    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.