Blank Space on Home page

amber · February 19, 2015

My home page code is giving me a large blank space after the main content in my wordpress page. Then the other section of the page, which should flow after the main content, is actually going all the way to the bottom of my page after the sidebar. My website is bellingham.org, I will also include screenshots of our home page. Here is the code I have & screenshots:

<?php
/*
Template Name: Home Page
*/
?>

<?php get_header(); ?>
<?php get_sidebar(); ?>

<div id="mainContent">

   <div id="wpContent">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                    <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

                    <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

            <?php endwhile; endif; ?>

    </div>

    <div id="todoBlock">

       <div id="todoHeading">
           <span id="todoHeadingL">Things to Do</span>
            <span id="todoHeadingR"><a href="<?php bloginfo('url'); ?>/activities">View All »</a></span>
        </div>

       <?php
            $pages = query_posts(array('post_parent' => 2, 'post_type' => 'page', 'showposts' => 6, 'orderby' => rand));
            // Set an arbitrary variable to use to test if the photo should lfoat left or right
            $x=1;
            foreach($pages as $child) {
                // Get the Activity Title
                $todo = get_the_title($child->ID);
                // Get the PATH to the thumbnail image
                $post_image_id = get_post_thumbnail_id($child->ID);
                if ($post_image_id) {
                    $thumbnail = wp_get_attachment_image_src( $post_image_id, 'home-post-thumbnail', false);
                    if ($thumbnail) (string)$thumbnail = $thumbnail[0];
                }
                // Get the link to the Activity page
                $link = get_permalink($child->ID);

                // Check to see if we're floating left ($x is even) or right ($x is odd)
                if ($x % 2) {
                    // $x is odd, so we are floating left
                    $float = "float: left; ";
                } else {
                    $float = "float: right; ";
                }
        ?>

       <div style="<?php echo $float; ?>position: relative; background: url(<?php echo $thumbnail; ?>); width: 300px; height: 143px; border: 2px solid #1E326A; margin-bottom: 5px;">
           <div class="todoText"><a href="<?php echo $link; ?>"><?php echo $todo; ?></a></div>
       </div>

       <?php
            ++$x;
        } ?>

   </div>

</div>

<div id="homelogo">

   <div id="maincontainer">

            <div id="leftcontainer">
                <div class="miniheading">Getting Around</div>
                <div id="transportation">
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/maps-icon.gif" /> <a href="transportation/maps/">Maps</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ground-transportation-icon.gif" /> <a href="transportation/ground-transportation/">Ground Transportation</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/airport-icon.gif" /> <a href="transportation/air-transportation/">Air Transportation</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/water-transportation-icon.gif" /> <a href="transportation/water-transportation/">Water Transportation</a></p>
                    <p><img src="<?php bloginfo('stylesheet_directory'); ?>/images/border-crossing-icon.gif" /> <a href="transportation/us-canada-border/">Border Crossing</a></p>
                </div>
            </div>

            <div id="rightcontainer">
                <div class="miniheading">Insider Blogs</div>
                <div id="blog">

                     <?php query_posts($query_string . '&cat=1&posts_per_page=2'); ?>
                     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                     <div class="post">

                         
                         <a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><br />

                         
                         <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

                          <div class="entry">
                            <?php the_excerpt(); ?>
                          </div>

                     </div> 

                     <?php endwhile; else: ?>
                     <p>Sorry, no posts matched your criteria.</p>
                     <?php endif; ?>

                     <div class="fltrt"><a href="http://www.bellingham.org/category/blog/insider-blogs/">Visit Insider Blogs »</a></div>

                </div>
            </div>
   </div>
    </div>

   <div id="bottomhomediv"></div>


</body>
</html>

amber · February 19, 2015

My screenshots didn't post so you can see the homepage on bellingham.org to see what is happening. Thanks!

tryingtolearn · February 19, 2015

Find where this line

<div style="clear:both;"></div>

is being inserted in the wpContent div and remove it.

amber · February 19, 2015

I went through all my wpcontent files and didn't find anything with <div style="clear:both;"></div>. Any other suggestions? Or do you know what file this might be in specifically? Here is the code for WP content sections I found and I also found one reference to div style. See below for code.

On my home.php file this is the WP content section

<?php // Query for posts in the "Blog" category
   query_posts( 'cat=1' );
   ?>

   <p class="heading"><?php echo get_the_title( ?></p>

   <?php if (have_posts()) : ?>

       <?php while (have_posts()) : the_post(); ?>

           <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
               <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
               <small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>

               <div class="entry">
                   <?php the_content('Read the rest of this entry »'); ?>
               </div>

               <p class="postmetadata"><?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
           </div>

       <?php endwhile; ?>

       <div class="navigation">
           <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
           <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
       </div>

   <?php else : ?>

       <h2 class="center">Not Found</h2>
       <p class="center">Sorry, but you are looking for something that isn't here.</p>
       <?php get_search_form(); ?>

   <?php endif; ?>

In my index.php file here is the WP Content Section:

<?php if (have_posts()) : ?>

       <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

       <p class="heading"><?php single_cat_title(); ?></p>

       

       <div class="navigation">
           <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
           <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
       </div>

        <br />

       <?php while (have_posts()) : the_post(); ?>

       <div class="borderradius">

           <div class="date"><?php the_time('l, F jS, Y') ?></div>
           <div><a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></div>
           <?php if ((get_post_meta($post->ID, 'author', true)) || (get_post_meta($post->ID, 'publication', true))) : ?>
               <div style="text-transform: uppercase;"><?php if (get_post_meta($post->ID, 'author', true)) : ?><?php echo get_post_meta($post->ID, 'author', true); ?><?php endif; ?><?php if ((get_post_meta($post->ID, 'author', true)) && (get_post_meta($post->ID, 'publication', true))) : ?>—<?php endif; ?><?php if (get_post_meta($post->ID, 'publication', true)) : ?><?php echo get_post_meta($post->ID, 'publication', true); ?><?php endif; ?></div>
            <?php endif; ?>
            <div class="dotted"></div>
           <em><?php the_excerpt() ?></em>

       </div>

       <?php endwhile; ?>

       <div class="navigation">
           <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
           <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
       </div>

   <?php else : ?>

       <h2 class="center">Not Found</h2>
       <?php include (TEMPLATEPATH . '/searchform.php'); ?>

   <?php endif; ?>

The only div style reference I find is on my 1colpage.php:

<?php

/*

Template Name: One column

*/

?>

<?php get_header(); ?>



<div style="padding: 10px 20px 0 20px;">

<div id="breadcrumbs"><?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?></div>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

               <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

               <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

       <?php endwhile; endif; ?>



   <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

<?php if (comments_open( $post_id )) { ?>

   <div class="commentsbox">

           <?php comments_template(); ?>

   </div>

<?php } ?>

</div>



<?php get_footer(); ?>

</div>

</body>

</html>

tryingtolearn · February 19, 2015

Any other suggestions? Or do you know what file this might be in specifically?

Not really, not sure how you are putting all the content together and I dont use wordpress...

I would check around how that opening paragraph is getting populated.

looks like a function called have_posts() or the_content()

I would start with how or where that opening paragraph is being added.

The line is right between that wpContent and the todoBlock divs.

Psycho · February 19, 2015

The DIV that tryingtolearn mentioned above IS in the code of your page. That is probably at least part of the problem.

Just looking at the page and not the code, it appears to me that the content is too wide to fit, therefore it is being pushed below the right-hand section. You need to expand the width of the area where the content or reduce the container that holds that content.

You can try widening these divs

<div id="mainContent">
<div id="wpContent">

Check your stylesheet for references to those IDs.

This appears to be the container for the section that is pushed to the bottom.

<div id="maincontainer">

amber · February 19, 2015

Thanks for the input Guru! I am assuming the main content, wpcontent & maincontainer widening is within my stylehome.css file? I tried tweaking some of the different widths within that code & it didn't bump it up. I did notice when I take out the sidebar completely, it bumps it up. So I think you are on the right track. I pasted the original code to stylehome.css file below before I started changing things. Do you have any suggestions on where & what to change?

Here is that code:

/* Use this page background if it's the home page */

/*body {
   background-image: url(images/bg_home.gif) !important;
}*/

@font-face {
    font-family: 'LeagueGothic';
    src: url('fonts/LeagueGothic-Regular-webfont.eot');
    src: url('fonts/LeagueGothic-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LeagueGothic-Regular-webfont.woff') format('woff'),
         url('fonts/LeagueGothic-Regular-webfont.ttf') format('truetype'),
         url('fonts/LeagueGothic-Regular-webfont.svg#fonts/LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Home page sidebar */
.twoColFixRtHdr #sidebarhome {
   float: right;
   width: 300px;
   background-color: transparent;
   padding: 15px 20px 10px 0px;
   margin: 0;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget {
   border-width: 1px;
   border-color: #999;
   border-style: solid;
   margin-bottom: 20px;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .widgettitle {
   border-bottom: 1px #999 solid;
   background-color: #1B4479;
   margin: 0;
   color: #67A8CE;
   font-family: 'LeagueGothic', sans-serif;
   font-size: 34px;
   text-transform: lowercase;
   padding: 2px 10px;
   height: 45px:
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .textwidget {
   padding: 5px;
   overflow: auto;
   height: 1%;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .textwidget h3 {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 16px;
   color: #298023;
   font-weight: bold;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .textwidget img {
   border: 0px;
   margin: 5px;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .widgettitle .rsswidget {
   color: #67A8CE;
   text-decoration: none;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .widgettitle .rsswidget img {
   display: none;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget ul li {
   list-style: none;
   ;
   margin-bottom: 10px;
}

.twoColFixRtHdr #sidebarhome .sidebarwidget .rss-date {
   display: block;
   font-weight: bold;
}

.twoColFixRtHdr #mainContent {
   background: url(images/home-content-bg.gif) top no-repeat !important;
}

.twoColFixRtHdr #mainContent #todoBlock {
   width: 620px;
   height: 550px;
   padding: 0;
}

.twoColFixRtHdr #mainContent #todoBlock #todoHeading {
   background: #1b4479;
   width: 98.5%;
   height: 43px;
   margin: 0 0 10px 0;
   padding: 10px 0px 0px 10px;
   color: #ffffff;
   text-decoration: none;
   font-size: 34px;
   font-family: 'LeagueGothic', sans-serif;
   color: #67A8CE;
}

.twoColFixRtHdr #mainContent #todoBlock #todoHeading #todoHeadingL {
   font-family: 'LeagueGothic', sans-serif;
   font-size: 34px;
   text-transform: lowercase;
   color: #67A8CE;
   float: left;
}

.twoColFixRtHdr #mainContent #todoBlock #todoHeading #todoHeadingR a {
   padding: 9px 20px 0 0;
   font-family: 'LeagueGothic', sans-serif;
   font-size: 18px;
   text-transform: lowercase;
   text-align: right;
   color: #67A8CE;
   float: right;
}

.twoColFixRtHdr #mainContent #todoBlock .todoText a {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 300px;
   font-weight: bold;
   color: #53782f;
   text-decoration: none;
   background: url(images/text-bg-gradient.png) left no-repeat;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 18px;
}

.twoColFixRtHdr #homelogo {
   background: url(images/content_bottom_bg.gif) bottom no-repeat !important;
   padding: 0px 20px 0px 20px;
}

.twoColFixRtHdr #homelogo #maincontainer {
   width: 620px;
}

.twoColFixRtHdr #homelogo #leftcontainer {
   float: left;
   width: 300px;
}

.twoColFixRtHdr #homelogo #rightcontainer {
   float: right;
   width: 300px;
}

.twoColFixRtHdr #homelogo .miniheading {
   background: #1B4479;
   padding: 5px 0px 0px 10px;
   margin: 0 0 10px;
   color: #67A8CE;
   font-family: 'LeagueGothic', sans-serif;
   font-size: 34px;
   text-transform: lowercase;
   height: 40px;
}

.twoColFixRtHdr #homelogo #transportation {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size: 20px;
   font-weight:normal;
   text-decoration: none;
}

.twoColFixRtHdr #homelogo #transportation img {
   border-style: none;
   border-width: 0px;
   vertical-align: middle;
}

.twoColFixRtHdr #homelogo #blog .title {
   font-size: 18px;
   font-weight: bold;
}

.twoColFixRtHdr #bottomhomediv {
   height: 13px;
   background-image: url(images/bottom-home-div.gif) !important;
   background-repeat: no-repeat;
   clear: both;
}

.twoColFixRtHdr #socialmedia {
   height: 502px;
   background-image: url(images/home-page-bottom.png) !important;
   background-position: top !important;
   background-repeat: repeat-y;
   color: #000;
   font-size: 10px;
   padding: 0px 20px 0px 20px;
   margin: 0px;
   clear: both;
}

.twoColFixRtHdr #socialmedia #section1 #column1 .header, .twoColFixRtHdr #socialmedia #section1 #column2 .header, .twoColFixRtHdr #socialmedia #section2 #column3 .header, .twoColFixRtHdr #socialmedia #section2 #column4 .header {
   border-width: 0px;
   background-color: #759a3e;
   /* margin: 5px; */
   color: #1B4479;
   font-family: 'LeagueGothic', sans-serif;
   font-size: 23px;
   padding: 4px 5px 2px 5px;
}

.twoColFixRtHdr #socialmedia #section1 {
    float: left; /* Sets this section to the left */
    width: 470px;
   height: 452px;
   margin-top: 20px;
}

    .twoColFixRtHdr #socialmedia #column1 {
        float: left; /* Sets this column to the left inside its section */
        width: 215px;
       padding-right: 10px;
       padding-left: 10px;
   }

    .twoColFixRtHdr #socialmedia #column2 {
        float: right; /* Sets this column to the right inside its section*/
        width: 215px;
       padding-right: 10px;
       padding-left: 10px;
   }

.twoColFixRtHdr #socialmedia #section2 {
    float: right; /*Sets this section to the right */
    width: 470px;
   height: 452px;
   margin-top: 20px;
}

    .twoColFixRtHdr #socialmedia #column3 {
        float: left; /* Sets this column to the left inside its section */
        width: 215px;
       padding-right: 10px;
       padding-left: 10px;
   }

    .twoColFixRtHdr #socialmedia #column4 {
        float: right; /* Sets this column to the right inside its section*/
        width: 215px;
       padding-right: 10px;
       padding-left: 10px;
   }

.twoColFixRtHdr #socialmedia #picasathumbs {
   padding: 5px 11px 0px 11px;
}

.twoColFixRtHdr #socialmedia #picasathumbs img {
   margin: 4px;
   border-color: #fff;
   border-style: solid;
   border-width: 2px;
}

.twoColFixRtHdr #socialmedia #youtubethumbs {
   padding: 0px 7px 0px 7px;
}

.twoColFixRtHdr #socialmedia #youtubethumbs img {
   border-style: none;
   border-width: 0px;
   padding: 9px 0 9px 0;
}

#twitter_update_list {
   font-size: 11px;
   line-height: 21px;
   list-style: none;
   margin: 0;
   padding: 5px 0 5px 0;
}

#twitter_update_list li {
   padding-bottom: 7px;
   margin-bottom: 9px;
}

.twoColFixRtHdr #footer {
   height: 26px !important;
   background-image:url(images/home-footer_bg.png) !important;
   padding-top: 12px !important;
}

tryingtolearn · February 19, 2015

clear:both is going to make the element drop below any floated elements before it in the document.

Since the sidebar is floated it is dropped down below the side bar

(Also why when you remove the floated sidebar it jumps back up).

So given that, you can make it wider but if the sidebar is floated and you leave the clear:both div in there, in theory, it will (Or maybe I should say it SHOULD) still drop to the bottom of the floated element before it - being the sidebar.

How is this text being added to your site

Visit Bellingham, Washington for a fun getaway filled with magnificent scenery, a culture of outdoor recreation, Western Washington University, the Alaska Ferry, the Canadian border, Mt. Baker, the Salish Sea, local food, spirits, art and music. These are all part of the genuine Bellingham Experience. We encourage you to simply Be in Bellingham and our surrounding Whatcom County.

This site is loaded with travel info including lodging, restaurants, things to do, local businesses, resources and insider advice for a personal visit, group convention, or general community information.

We are Bellingham Whatcom County Tourism, a local non-profit association dedicated to serving visitors. Our main Visitor Center at I-5 Exit 253, 904 Potter St. in Bellingham is open 9 a.m. to 5 p.m. daily (Pacific Standard Time, excluding major holidays). Our downtown Bellingham Info Center at 1306 Commercial St. is open Mon – Sat. 11 a.m. to 3 p.m. We are happy to be of assistance on your journey.

From the database or is it just static text?

amber · February 19, 2015

That text is from the Wordpress blog page. This may seem like a stupid question but I have looked over that first page and I am missing where <div style="clear:both;"></div> is on that page.

tryingtolearn · February 19, 2015

if you view the page source its on line 327 right after the closing div for div id="wpContent"

look at the code that includes those blog posts in that section of your site.

Im guessing, if you didn't add it there static, its being included from wherever that text is coming from.

amber · February 19, 2015

Found that code, now I just have to find where it actually is located in my files. Weird thing is that code is on all the pages when I view page source but it doesn't affect the other pages in the same way. Thanks for the input, I will keep working on it I guess lol

tryingtolearn · February 19, 2015

Weird thing is that code is on all the pages when I view page source but it doesn't affect the other pages in the same way

As Psycho pointed out earlier, there may be(are) more issues in the code.

You can check how valid the code is and get a good starting point to correct most issues using the W3C Markup validator

amber · February 19, 2015

Thank you, I will start there.

Sign In

Blank Space on Home page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information