Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Strange DIV Clearing/Alignment problem

    Index.php

    PHP Code:
    <?php get_header(); ?>

    <div id='blog_wrap'>
      <div id='column_one' class='clearfix'>
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Column One')) : ?><?php endif; ?>
      </div>


      <div id='column_two' class='clearfix'>
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Column Two')) : ?><?php endif; ?>
      </div>

      <div id='main_col' class='clearfix'>
                        <?php
      
    global $more;
      
    query_posts('posts_per_page=1');
      if ( 
    have_posts() ) : while ( have_posts() ) : the_post();
      
    $more=0;
    ?>

                     <div class='col_wrap' id="c-<?php the_ID(); ?>">
                        <h1> <p class='main_title'><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></h1>
                        <div class='thumb_front'><?php the_post_thumbnail(); ?></div>
                        <div id="the_content"><?php echo apply_filters('the_excerpt',get_the_excerpt().' <a href="'.get_permalink().'"> [Full Story]</a> &rarr;'); ?></div>
                            <div id='meta_wrap'>
                                <p style="padding-top:10px; font-size: 0.9em; text-transform: uppercase; color: rgb(180, 0, 0); "> Posted <?php wp_days_ago_ajax(); ?></p>
                                
                                <div id='facebook' onclick="window.open('https://www.facebook.com/LapgGaming','newwindow');"><img src='<?php echo get_bloginfo('template_directory');?>/img/facebook.png'/></div>
                                <div id='twitter' onclick="window.open('http://twiter.com/LapgChris','newwindow');"><img src='<?php echo get_bloginfo('template_directory');?>/img/twitter.png'/></div>
                                
                                <p class="author">Written By <?php  the_author(); ?></p>
                                <p style="font-size:0.6em;">Copyright © <?php echo date("Y"); ?> <a href="<?php echo get_option('home'); ?>"><?php echo get_option('home'); ?></a></p>
                        
                            </div>

                     </div>
                     
         <?php endwhile; ?>
       <?php endif; ?>
      </div>

      <div id='column_three' class='clearfix'>
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Column Three')) : ?><?php endif; ?>         
      </div>

      <div id='column_four' class='clearfix'>
        <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Column Four')) : ?><?php endif; ?>        
      </div>

    <?php get_footer(); ?>
    CSS

    Code:
    #blog_wrap {
        height: auto;
        margin: 20px;
    }
    
    #column_one {
        float: left;
        height: auto;
        margin-bottom: 10px;
        padding-bottom: 10px;
        padding-right: 11px;
        clear: none;
        width: 22.381205%;
        border-right: 1px solid rgb(193, 193, 193);
        color: rgb(32, 32, 34);
        line-height: 1.5em;
        letter-spacing: -0.07em;
        word-spacing: -0.04em;
    }
    
        #column_one a {
            font-family: "nimbus-sans",Helvetica,Arial,sans-serif;
            text-decoration: none;
            font-weight: 900;
            color: rgb(32, 32, 34);
            font-size: 1.9em;
            line-height: 1.1em;
            letter-spacing: -0.07em;
            word-spacing: -0.04em;
            padding: 13px 0 20px 0;
            
        }
    
       #column_one a:hover {
            text-decoration: underline;
        }
    
        #column_one li {
        list-style-type: none;
        }
    
    #column_two {
        float: left;
        height: auto;
        margin-left: 1.2006748776784208%;
        margin-bottom: 10px;
        padding-bottom: 10px;
        padding-right: 11px;
        clear: none;
        width: 22.381205%%;
        border-right: 1px solid rgb(193, 193, 193);
        color: rgb(32, 32, 34);
        line-height: 1.5em;
        letter-spacing: -0.07em;
        word-spacing: -0.04em;
    }
    
        #column_two a {
            font-family: "nimbus-sans",Helvetica,Arial,sans-serif;
            text-decoration: none;
            font-weight: 900;
            color: rgb(32, 32, 34);
            font-size: 1.9em;
            line-height: 1.1em;
            letter-spacing: -0.07em;
            word-spacing: -0.04em;
            padding: 13px 0 20px 0;
        }
    
        #column_two a:hover {
            text-decoration: underline;
        }
    
        #column_two li {
            list-style-type: none;
        }
    
    #column_three {
    float: right;
    height: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-right: 11px;
    width: 24.381205%;
    color: rgb(32, 32, 34);
    line-height: 1.5em;
    letter-spacing: -0.07em;
    word-spacing: -0.04em;
    }
    
        #column_three img {
            width:100%;
            height:100%;
    
        }
    
        #column_three a {
            font-family: "nimbus-sans",Helvetica,Arial,sans-serif;
            text-decoration: none;
            font-weight: 900;
            color: rgb(32, 32, 34);
            font-size: 1.9em;
            line-height: 0.87em;
            letter-spacing: -0.07em;
            word-spacing: 0.44em;
            padding: 13px 0 20px 0;
        }
    
        #column_three a:hover {
            text-decoration: underline;
        }
    
        #column_three li {
            list-style-type: none;
        }
    
    
    #column_four {
        float: right;
        height: auto;
        margin-right: 15px;
        margin-bottom: 10px;
        margin-top: 10px;
        padding-bottom: 10px;
        padding-right: 11px;
        width: 24.381205%;
        border-right: 1px solid rgb(193, 193, 193);
        color: rgb(32, 32, 34);
        line-height: 1.5em;
        letter-spacing: -0.07em;
        word-spacing: -0.04em;
    }
    
        #column_four a {
            font-family: "nimbus-sans",Helvetica,Arial,sans-serif;
            text-decoration: none;
            font-weight: 900;
            color: rgb(32, 32, 34);
            font-size: 1.9em;
            line-height: 0.87em;
            letter-spacing: -0.07em;
            word-spacing: 0.44em;
            padding: 13px 0 20px 0;
        }
    
        #column_four a:hover {
            text-decoration: underline;
        }
    
        #column_four li {
            list-style-type: none;
        }
    
    
    
    #main_col {
        float: right;
        height: auto;
        padding-bottom: 10px;
        margin-left: 1.2968449468533827%;
        margin-top: -31px;
        clear: none;
        width: 52.183803%;
        border-bottom: 1px solid rgb(193, 193, 193);
    
    }
    What's Happening is when is this.... When there is one post in column 2, the theme looks like this......



    But when there is more than one post in column 1 or 2, the theme is right.



    Also, if i put clear: both; in column 3, it looks right. But when i post something in column 2, it looks like this....




    What's up? It's probably something simple that my dumb *** is overlooking !! lol
    Last edited by kor81; 08-20-2013 at 07:44 PM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Edit: i think i got it..... i had a closing </div> in the wrong location

    Yup, thats what it was
    Last edited by kor81; 08-20-2013 at 07:43 PM.


  •  

    Posting Permissions

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