Grow your CSS skills. Land your dream job.

Div Issue

  • # February 27, 2013 at 4:22 pm

    The div is inside of the wrapper in the code, but on the page it is outside of the wrapper. Is there something going on on the page that is making it come outside of the wrapper.

    <!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>
    </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 -->
    <?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!

    The broken page: http://theavocadogirl.com/2013/02/mock-refried-beans/

    # February 27, 2013 at 4:34 pm

    Already being discussed here

    http://css-tricks.com/forums/discussion/22971/getting-divs-to-work-for-sidebar#Item_19

    Just because you don’t like the answers you are getting is no reason to start a new thread.

    # February 27, 2013 at 4:36 pm

    I thought it related more to php. Stop commenting on my posts please. There is no rule that says that I cannot post in multiple threads.

    # February 27, 2013 at 4:42 pm

    I’ll comment wherever I wish.

    If you people raise multiple threads about the same issue it wastes other viewers time.

    However, we’ve now narrowed this down to a PHP issue (I think) and let the experts in that subject take over.

    # February 27, 2013 at 4:44 pm

    Can someone show me what I can change to make this page work? I’m not understanding what needs to be changed to get the wanted result.

    # February 27, 2013 at 6:06 pm

    If what you posted in that pen is the your page’s template file, it’s a mess.

    Clean that up and properly section it into header.php, page.php, and footer.php.

    Other than the issues with the structure / function calls, the sidebar is most definitely being called outside of the main wrapper.

    EDIT: Taking a closer look at it, you need to move the get_sidebar() into the check for dynamic sidebar support. Where it is now is outside of the sidebar div and doesn’t act as a fallback if your registered bar isn’t supported / doesn’t exist.

    Like so:

    That should fix it, assuming there isn’t a bunch of extra bits in sidebar.php.

    # February 28, 2013 at 5:57 am

    Try this.

    PS, the actual file needs completely rearranging (like said above, if this is your template file). I haven’t changed any of the arrangement apart from the sidebar call for dynamic_sidebar and they way you’ve wrapped the elements. Doing that and reading this may resolve your problem.

    # February 28, 2013 at 1:29 pm

    The pin is not what my pages look like. They are in separate files. I simply put them into one pin for convenience. Honestly, I think it is easy to check for the divs one it is in one file.

    # February 28, 2013 at 1:32 pm

    What is the point of loading the sidebar if you already have it loaded like you do in your example?

    # February 28, 2013 at 1:36 pm

    http://theavocadogirl.com/2013/02/mock-refried-beans/

    If you look at firebug it is now inside of the wrapper but it isn’t showing up next to the content.

    # February 28, 2013 at 1:46 pm

    Finally fixed this . . . The Cannot be placed inside of this < ?php endwhile; ?>
    < ?php if ( $wp_query->max_num_pages > 1 ) : ?>

    < ?php next_posts_link('Older Posts'); ?>

    < ?php previous_posts_link('Newer Posts'); ?>

    < ?php else: ?>

    No newer/older posts

    < ?php endif; ?>
    That was the problem.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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