...

View Full Version : Is this a clear problem or cache problem?



NoeG
11-23-2011, 01:36 AM
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

Sammy12
11-23-2011, 02:04 AM
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

NoeG
11-23-2011, 02:37 AM
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!

Sammy12
11-23-2011, 02:39 AM
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/

NoeG
11-23-2011, 02:44 AM
ohhh I see because I'm looping it.. thanks for the info appreciate that



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum