I cannot seem to get the sidebar the touch the bottom of the page. The footer is touching and so is the content but not the sidebar. I tried everything. Went all over the internet and searched. Change a few things. Actually... what I have now was not what I had before (Before it was worse. the sidebar was connected to the footer bar but the posts went past the footer .... it was frustrating).
This is my index.php code
<?php get_header(); ?> <div id='container'> <?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <div id="postAvatar"> <?php if (function_exists('gkl_postavatar')) gkl_postavatar('', '', ''); ?> </div> <div id="postTitleDate"> <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1> <h2><?php the_time('l, F jS, Y') ?></h2> </div> <div class="entry"> <?php the_content(); ?> <p class="postmetadata"> Posted <?php _e('by'); ?> <?php the_author(); ?> at <?php the_time() ?> | <?php comments_popup_link('Be The First To Comment!', '1 Comment', '% Comments'); ?> </p> </div> </div> <?php endwhile; ?> <div class="pnNav"> <?php posts_nav_link(' ','PREVIOUS','NEXT'); ?> </div> <?php else: ?> <div class"post"> <h2><?php_e('Not Found'); ?></h2> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
Basic Wordpress layout; wrapper, header, container (and all in between), sidebar, and footer.
This is my style.css
/* Theme Name: Card Craft Theme URI: http://www.foreverunique.net/ Description: Based on Home Made Craft Cards. Version: 1.0 Author: Godz Girl Author URI: http://www.foreverunique.net/ */ /*BODY*/ body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form { margin: 0; padding: 0; } html, body { height: 100%; } body { margin: 0; font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; text-align: center; vertical-align: top; background: #FFFFFF url('images/bolly01.jpg'); color: #000000; } a:link, a:visited, a:active { text-decoration: underline; color: #336699; } a:hover { text-decoration: none; color: #FF0000; } p { padding: 10px 0 0 0; } #wrapper{ margin: 0 auto 0 auto; width: 750px; text-align: left; } #header { float: left; width: 750px; height: 250px; background: #FFFFFF url('images/header.png') no-repeat; margin: 0 0 0 0; } #navigation { float: left; width: 750px; height: 50px; background: #FFFFFF url('images/navBack.png') no-repeat; } #container { position: relative; float: left; width: 500px; min-height: 100%; background: #FFFFFF url('images/brdLeft.png') repeat-y; } #sidebar { position: relative; display: inline; float: left; width: 250px; min-height: 100%; background: #FFFFFF url('images/brdRight.png') repeat-y; background-position: top right; } #footer { float: left; position: abolute; bottom: 0; width: 750px; height: 30px; background: #FFFFFF url('images/navBack.png') no-repeat;\ color: #FFFFFF; } /*POSTING*/ .post { padding: 10px 10px 10px 10px; } .post h2 { font-family: Georgia, Sans-serif; font-size: 18px; } .entry { line-height: 18px; text-align: justify; color: #333333; } p.postmetadata { background: #FFFFCC; border-top: 1px solid #330000; border-bottom: 1px solid #330000; margin: 10px 0 10px 0; padding: 0 0 3px 0; } p.postmetadata a:link, a:visited, a:active { text-decoration: none; color: #336699; } p.postmetadata a:hover { text-decoration: none; color: #FF0066; } .pnNav { margin: 0 10px 10px 10px; } #postAvatar { float: left; width: 100px; height: 100px; } #postTitleDate { float: left; width: 380px; height: 100px; text-align: center; vertical-align: middle; margin: 0 0 10px 0; } #postTitleDate a:link, a:visited, a:active { text-decoration: none; color: #663333; } #postTitleDate a:hover { text-decoration: none; color: #CC3399; } #postTitleDate h1 { font-family: Georgia, Sans-serif; font-size: 24px; padding: 22px 0 0 0; color: #663333; text-transform: uppercase; } #postTitleDate h2 { font-family: Georgia, Sans-serif; font-size: 14px; padding: 0 0 0 0; color: #006666; } /*COMMENTS*/ .comments-template{ margin: 10px 0 0; border-top: 1px solid #ccc; padding: 10px 0 0; } .comments-template ol{ margin: 0; padding: 0 0 15px; list-style: none; } .comments-template ol li{ margin: 10px 0 0; line-height: 18px; padding: 0 0 10px; border-bottom: 1px solid #ccc; } .comments-template h2, .comments-template h3{ font-family: Georgia, Sans-serif; font-size: 16px; } .commentmetadata{ font-size: 12px; } .comments-template p.nocomments{ padding: 0; } .comments-template textarea{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; }
Sorry... everything is pretty long. lol
If anyone has any suggestions, your help will be well appreciated. I bet you the solution is more simple then I think. it always is. lol
If you want to look at the website, it is at foreverunique.net/blog/. I have not yet done the sidebar, nav, or footer yet... not even the comments page. Just that, the main...