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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts

    Is this a clear problem or cache problem?

    on http://noegarciadesign.com/kyle I have a sidebar that is dumped at the bottom of the container instead of the top but if I click on any other page it jumps up where its supposed to be. Is that a cache problem on my end? I cleared my cache and also tried on different browsers but it does the same thing. Or could it be something else like a clear fix problem? I used overflow:auto instead of the clear:both method.

    I've never had this problem before though so I'm stumped.

    this is all the html and css associated with the issue

    Code:
    #content{
    width:1024px;
    margin:30px auto;
    border:2px dashed #000;
    color:#4d4d4d;
    background-color:#f2f2f2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 30px 0px ;
    -moz-box-shadow: 0px 0px 30px 0px ;
    box-shadow: 0px 0px 30px 0px ; 
    }
    
    #post{
    width:700px;
    padding:10px 0 10px 10px;
    float:left;
    }
    
    #post h2{
    color:#4d4d4d;
    }
    
    #post h2 a:link, #post h2 a:visited{
    color:#4d4d4d;
    text-decoration:none;
    }
    
    #post a:link, #post a:visited{
    color:#4d4d4d;
    }
    
    #sidebar{
    width:225px;
    padding:10px;
    margin:20px 0 20px 25px;
    float:left;
    border:1px dashed #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    
    #sidebar ul{
    list-style-type:none;
    }
    
    #sidebar a:link, #sidebar a:visited{
    color:#a5afa1;
    text-decoration:none;
    }
    Code:
    <div id="content">
    	<?php if(have_posts()):?>
    		<?php while(have_posts()):the_post();?>
    <div id="post">		
    <h2 class=post-title><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h2>
    <?php the_content();?>
    </div>
    	<?php endwhile;?>
    		<?php endif;?>
    
    <div id="sidebar">
    <h2>Archives</h2>
    		<ul><?php wp_get_archives('type=monthly'); ?></ul>
    </div>
    </div>
    This isn't a time critical issue but a prompt response would be appreciated

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Let's start by wrapping all those #post into one column.

    This way, we will have one column on the left and one column on the right.

    Code:
    #post {
      /* 700px width + 10px padding = 710px */
      width: 700px;
      padding: 10px 0 10px 10px;
      float: left;
    }
    The width of the column should be: #post is (700px width + 10px padding on the right = 710px), therefore we are going to give #leftColumn a width of 710px; along with float: left;

    therefore, the column needs to be 710px
    Code:
    #leftColumn {
       width: 710px;
       float: left;
    }


    Now that we have one column on the left and one column on the right, we no longer need the floats on #post, so we can remove those!

    Code:
    #post {
      width: 700px;
      padding: 10px 0 10px 10px;
    }
    we already cleared #content with overflow: auto;, so the <p class="clear"></div> is no longer needed!


    For the sake of simplicity:

    1. wrap all the #post with a div called #leftColumn
    2. style #leftColumn with width: 710px; float: left;
    3. remove float: left; from #post
    4. remove <p class="clear"></p>, you already used overflow: auto; to clear the float

    Last edited by Sammy12; 11-23-2011 at 02:19 AM.

  • Users who have thanked Sammy12 for this post:

    NoeG (11-23-2011)

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    Easy fix thank you sir!

    I thought floating the #post div would give me the same result I'm trying to start using less divs but if it works it works thanks again!

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    One more thing that has nothing to do with your original post, but I felt inclined to inform you that "id" should only be used once on a page! You may want to change #post to .post!

    You can use an ID once for a page (once for home page, once for a search page, etc)
    You can use CLASSES multiple times!

    There is only ONE header!
    Code:
    <div id="header">
    
    </div>
    There may be multiple posts!
    Code:
    <div id="postOne" class="post">
    </div>
    <div id="postTwo" class="post">
    </div>
    If you don't believe me
    http://css-tricks.com/818-the-differ...-id-and-class/
    Last edited by Sammy12; 11-23-2011 at 02:42 AM.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    ohhh I see because I'm looping it.. thanks for the info appreciate that


  •  

    Posting Permissions

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