[Closed] Getting Divs to Work For Sidebar - CSS-Tricks

This topic is empty.

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

Author

Posts

February 27, 2013 at 3:47 pm #43024

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/

February 27, 2013 at 3:49 pm #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?

February 27, 2013 at 3:57 pm #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.

February 27, 2013 at 3:58 pm #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!