www.webdeveloper.com
Results 1 to 12 of 12

Thread: Having some trouble with properly clearing floats

  1. #1
    Join Date
    Jul 2008
    Posts
    52

    Having some trouble with properly clearing floats

    I've nearly finished a theme for Wordpress for my blog, but I've hit one final snag. The page loads strangely, rendering the content before the containing div shows up beneath it. Sort of as if the content were spilling out of the div it resides in. Once the page has loaded, it displays appropriately, however, for people with slower connections the strange load sequence will look awful.

    I figured out that the problem was due to some floats that weren't being cleared properly. Trouble is, when I clear the floats, the sidebars will no longer rest next to the main content, they're shifted down instead, but still floating to the right.

    Here's the staging page:
    http://www.petruzzo.com/staging/wp/

    Here's the markup for the main template page:

    Code:
    <div id="mpage">
    
    	<div id="content">
        	
    			<?php if (have_posts()) : ?>
                
                <?php while (have_posts()) : the_post(); ?>
                    <span class="post" id="post-<?php the_ID(); ?>">
                        
                        <div class="post">
                            
                            <div class="title">
                                <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
                        	</div>
                        
                            <div class="postdata">
                                <span class="date"><span class="author">Posted by <?php the_author() ?> on</span> <?php the_time('M d, Y') ?> <?php edit_post_link(__('Edit')); ?>&nbsp;//&nbsp;</span>
                                <span class="category"><?php the_category(', ') ?></span>
                            </div>
                        
                            <div class="entry">
                                    <?php the_content('Read the rest of this entry &raquo;'); ?>
                                <span class="comments"><?php comments_popup_link('Leave a comment! ', 'Just 1 comment so far!', '% Comments so far, join the discussion!'); ?></span>
                            </div>
                                          					
    						<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
                        
                        </div>
                        
                <?php endwhile; ?>
            
            
                  <div class="navigation">
                          <div class="alignleft"><?php next_posts_link('Older Posts') ?></div>
                          <div class="alignright"><?php previous_posts_link('Newer Posts') ?></div>
                  <div class="clear"></div>
                  </div>
    	
            
    		  <?php else : ?>
          
                      <h2 class="t-center">Not Found</h2>
                      <p class="t-center">Sorry, but you are looking for something that isn't here.</p>
      
              <?php endif; ?>
            
        </div>
                
        <div id="sidebars">
    
                      <div class="sbar1">
                      <?php include(TEMPLATEPATH."/sidebar1.php");?>
                      </div>
                  
                      <div class="sbar2">
                      <?php include(TEMPLATEPATH."/sidebar2.php");?>
                      </div>
                  
        </div>
        <div class="clear"></div>
    </div>
    If you pull up the CSS, #content and #sidebars should float next to one another and they do, provided the floats are not cleared. But then the page loads weird. If they're cleared, they won't sit together.

    I've been combing through looking for something that I know is wrong, but I just can't find it.

    I'm hoping someone can give me a hand with this.

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Get rid of the clearleft after #content, since you need #content and #sidebar to act as "columns", they need to be floated against each other, not cleared. You should be able to adjust #sidebar to float left, since it comes after #content, and that's floated left. You can more than likely get rid of clearleft, and just use the clear class right after you #sidebar rule ends so that your #footer can clear both of those floats.
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Jul 2008
    Posts
    52
    That resolves the problem of where the columns fall, but it brings back the problem of the awkward page rendering.

    Here's a picture of the page rendering:
    http://i24.photobucket.com/albums/c3...o/Picture2.png

    On my computer it only stays like this for a second, but on a slower connection, I'm sure it sits like this for much longer. The thick dark blue border around the top is actually all that has rendered of the containing div that holds the header, the content and the footer. Because of the floats not clearing, it's allowing the content to render before it picks up on it, so all the content has just spilled out.

    Any more ideas of what could be wrong here?

  4. #4
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    Sounds like it could be a case of Flash of Unstyled Content.

    One quick fix (albeit not the best) is to add a blank <script></script> just before the closing </head> tag.

  5. #5
    Join Date
    Jul 2008
    Posts
    52
    Well, I tried adding the <script></script> in the head tag, but it didn't solve the problem. It seems as it's loading almost like it would if I'd not cleared a float in the header div, but then it recognizes it and corrects the problem.

    Plus, clearing the floats just after closing #content fixes the loading problem completely, it just keeps it from being able to format correctly on the page.

  6. #6
    Join Date
    Jul 2008
    Posts
    52
    No more ideas?

  7. #7
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    I can't replicate the problem on my end, I'm sure the T1 connection isn't helping. I cleared my cache in IE 7 and FF 2 and can't duplicate it. Is there any specific scenario when it happens? What browsers is it happening on?
    Ryan Butler

    Ryan Butler.org

  8. #8
    Join Date
    Jul 2008
    Posts
    52
    Hmm. I'm using Firefox and Safari on this end. I just realized that I'm only able to duplicate it on the live site which I'm viewing using a staging plugin. It supposed that it was because I'm using a fiberoptic internet connection and the staging site had almost nothing to load.

    Here's the live site with the staging theme:
    http://william.petruzzo.com/?theme=Alt_Triple

    It could also be something in the sidebars. I looked through the installed widgets and didn't see any problem there. Maybe I missed something.

  9. #9
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    Yeah, I see it now. Is there a bad path somewhere in the code? More importantly, is there anything significantly different between the staging server and the live? Such as configurations? At this point, I'd be more inclined to believe there's something different between the two servers.
    Ryan Butler

    Ryan Butler.org

  10. #10
    Join Date
    Jul 2008
    Posts
    52
    No, the staging site and the live site are just independent installations of Wordpress on the same server. The only difference that I can come up with is that the live site has some plugins and widgets that don't exist on the staging site.

  11. #11
    Join Date
    Jul 2008
    Posts
    52
    Any more ideas?

  12. #12
    Join Date
    Jul 2008
    Posts
    52
    little help?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles