[ForeverUnique]

Okay, here is my problem. I know CSS but I never really used it to build a "strictly CSS" layout. I always used CSS and tables. Just a week ago I decided to build my own wordpress layout from scratch. I already got the header, content, sidebar, and footer in but that is when I came across a problem.

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...