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

#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;
}

<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

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.


#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

#leftColumn {
width: 710px;
float: left;
}


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-125.png

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!


#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

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-126.png

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!

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!

<div id="header">

</div>


There may be multiple posts!

<div id="postOne" class="post">
</div>
<div id="postTwo" class="post">
</div>


If you don't believe me :)
http://css-tricks.com/818-the-difference-between-id-and-class/

ohhh I see because I'm looping it.. thanks for the info appreciate that