CSS weird on one type of page

This site is best viewed in a modern browser with JavaScript enabled.

Ilan

Hi everyone,

My website is www.ironwhisk.com. The right sidebar looks normal until you use the search bar on the right hand side.
If you search for something that doesn't exist (e.g. "asdfasg") then everything is alright. If results do exist (e.g. "chocolate"), the right sidebar moves.

Any ideas how I can fix this issue?

Thanks so much,

Ilan

simplypixie

After search you have a div called sidebar-secondary which appears to be inside your content div when it should be outside and looking at the source code I would say it is because you are not closing some divs above (specifically the divs for the posts)

Ilan

Hey, thanks for your reply.

That's what I was thinking but I'm not sure why. The relevant php code is below, and all the div tags seem to be ok.

<?php get_header(); ?>

<div id="main">

<div id="adtop">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2637633606355131";
/* top ad */
google_ad_slot = "6411467690";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div id="content">

<?php if ( have_posts() ) : ?>
	<h1 class="archive"><?php echo $wp_query->found_posts; ?> <?php printf( __( 'Search Results for <strong>%s</strong>', 'ari' ), '' . get_search_query() . '' ); ?></h1>

<?php get_template_part( 'loop' ); ?>

<?php else : ?>
<h1 class="archive"><strong><?php _e( 'No Search Result Found', 'ari' ); ?></strong></h1>
	<div class="post">
		<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'ari' ); ?></p>
	</div>
<?php endif; ?>

</div>
<!--end Content-->

<?php get_sidebar('secondary'); ?>

</div>
<!--end Main-->

<?php get_footer(); ?>

simplypixie

Have a look in your loop template as what is being displayed is not in this code as it is happening when actual results are found and the layout then is determined by the loop template.

Ilan

There's not even a mention of sidebar in here though.

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
		<h1><?php _e( 'Not Found', 'ari' ); ?></h1>
		<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'ari' ); ?></p>

<?php endif; ?>
<?php /* Start the Loop. */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if (is_sticky()) echo __( '<h3 class="sticky-label">Featured</h3>', 'ari' ); ?>

<?php the_time('l, F d, Y') ?>
		<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'ari' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><h2><?php the_title(); ?></h2></a>
<?php _e( 'Written by', 'ari' ); ?> <?php the_author() ?> // <?php comments_popup_link( __( 'Leave a comment', 'ari' ), __( 'One comment', 'ari' ), __( '% comments', 'ari' ) ); ?>
<br>
<br>
<div id="forlinks">
	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<?php the_excerpt(); ?>
			<p class="meta"><span><a href="<?php the_permalink(); ?>">
	<?php else : ?>

		<?php the_content( __('Read more &#62;&#62;', 'ari' ) ); ?></div>

		<div class="clear"></div>

		<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'ari' ), 'after' => '</div>' ) ); ?>

<?php if(function_exists('selfserv_shareaholic')) { selfserv_shareaholic(); } ?>				
	<?php endif; ?>
<?php if ( count( get_the_category() ) ) : ?>	
				<?php endif; ?>

</div>
<!--end Post-->


	<?php comments_template( '', true ); ?>

<?php endwhile; // End the loop. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<p class="previous"><?php next_posts_link( __( '&larr; Older posts', 'ari' ) ); ?></p>
				<p class="next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'ari' ) ); ?></p>
<?php endif; ?>

simplypixie

As I said before, it is nothing to do with the sidebar, it is to do with the fact that one or more divs before the sidebar have not been closed and looking at your code, it is this div

<div id="post-<?php the_ID(); ?>"

It looks like it should be closed where you have the 2 br tags

Ilan

I moved the div from

<?php endif; ?>

</div>
<!--end Post-->

to right after the br tags and it didn't fix it, only made the formatting worse.

simplypixie

Looking again, I said to put it in the wrong place. Try closing the div just before the endwhile.

If you look at your source code on the live page you will see that the div is not being closed and will hopefully help you work out where it needs closing in your loop. Sometimes just a bit of trial and error works and this is definitely what is breaking your layout.

This is a section of your source code where you should be able to see that you have 2 divs being opened (the post div and the forlinks div) and only one being closed:

<div id="post-2463" class="post-2463 post type-post status-publish format-standard category-breakfast category-cakes category-desserts tag-breakfast-2 tag-cake tag-cinnamon tag-coffee tag-cream-cheese tag-pecans">


Monday, February 25, 2013		<a href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/" title="Permalink to Cinnamon Swirl Coffee Cake" rel="bookmark"><h2>Cinnamon Swirl Coffee Cake</h2></a>
Written by Ilan // <a href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/#comments" title="Comment on Cinnamon Swirl Coffee Cake">9 comments</a><br>
<br>

<div id="forlinks">
				<p>Everyone should have a quick, simple recipe that can impress a crowd. You don&#8217;t always have enough time to make a bamboo cake, but that doesn&#8217;t mean you have to settle for mediocrity. You shouldn&#8217;t have to settle at all, &hellip; <a onclick="javascript:pageTracker._trackPageview('/outgoing/www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/');"  href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/">Read more <span class="meta-nav">&#62;&#62;</span></a></p>
			<p class="meta"><span><a href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/">


</div>
<!--end Post-->